提问人：grazdev 提问时间：11/1/2023 更新时间：11/2/2023 访问量：32
如果 parent 是 flex 元素，则不会显示具有纵横比的空 div
Empty div with aspect ratio does not appear if parent is a flex element
问：
请查看下面的代码片段：为什么我看到第一个具有正确纵横比的空 div，而不是包裹在 flex 元素中的同一个框？在第二种情况下，我还能做些什么来查看？
.box {
aspect-ratio: 16/9;
background: yellow;
border: 5px solid red;
margin-bottom: 20px;
}
.flex {
display: flex;
}<div class="box"></div>
<div class="flex">
<div class="box"></div>
</div>答：
3赞
Michael Benjamin
11/2/2023
#1
弹性项的初始设置为 。flex-grow: 0
这就是您在 flex 容器中看到的 box 元素。
no growth + no content = no width
只需添加或使项目全宽即可。flex-grow: 1flex: 1
.box {
aspect-ratio: 16/9;
background: yellow;
border: 5px solid red;
margin-bottom: 20px;
flex-grow: 1; /* NEW */
}
.flex {
display: flex;
}<div class="box"></div>
<div class="flex">
<div class="box"></div>
</div>
评论