如果父元素是 Flex 元素，则不会出现具有宽高比的空 div

Question

请查看下面的代码片段：为什么我看到第一个具有正确宽高比的空 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>

Answer 1

弹性项目的初始设置是

flex-grow: 0

。

这就是您在 Flex 容器中看到的 box 元素。

只需添加

flex-grow: 1

或

flex: 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>