我正在try 使用FlexBox创建以下CSS布局:
将布局想象为一个弹性行，左侧有一个框(图像)，右侧是一个弹性列，所有文本都堆叠在一起.左侧框的高度会自动调整为右侧弹性柱的高度.到目前为止，我已经做到了这一点，但我无法将它变成正方形(因为在宽度上与高度相同).
目前，我有生成以下结果的代码:
<div class="container">
<div class="profile_pic"></div>
<div class="text_container">
<h1>Name: Toby</h1>
<h2>Gender: Male</h2>
<h3>Password: 123</h2>
</div>
<div>
.container {
background: orange;
display: flex;
flex-direction: row;
}
.profile_pic {
aspect-ratio: 1/1;
background: blue;
}
.text_container {
display: flex;
flex-direction: column;
}
在栏的左边应该有一个正方形的蓝色方框，里面有文本，但由于某种原因没有显示出来？
如果我设置了一个特定的宽度，它确实会显示，但这不是我想要的，因为我希望宽度与高度相同(保持1/1的纵横比):
我目前的解决办法是将蓝色框包装在align-items设置为center的弹性框中，然后将蓝色框设置为与框的高度大致匹配的硬编码大小:
我看到了很多类似的布局，比如YouTube频道:
堆栈溢出指示器:
我相信这种类似的布局是通过使用变通方法来完成的，比如为容器或图像本身设置一个明确的高度.这种方法不是很好，因为总是有一个小的误差范围，如果我想从向右伸缩的列中删除一行，我将需要手动调整大小(它不是动态的).
唉，我相信这是一个相当有趣的问题，我希望大家能够共同获得更多关于如何在CSS中完成这样的布局的知识.
任何帮助都将不胜感激.