父元素为flex时，带aspect-ratio的空div不显示的问题排查与解决

原因分析 #

• 第一个独立的.box是块级元素，默认宽度为父容器的100%（比如body的可用宽度），aspect-ratio: 16/9会基于这个宽度自动计算出对应高度，因此能正常显示带宽高比的盒子。
• 被flex容器包裹的.box属于flex子元素，flex布局默认给子元素设置了flex-shrink: 1（允许收缩），且未指定width或flex-grow属性。当盒子为空时，它的宽度会被收缩至0，没有宽度作为基准，aspect-ratio无法计算出有效高度，所以盒子无法显示。

解决办法 #

给flex容器内的.box添加以下任一设置即可：

方案1：设置宽度为100% #

让子元素继承flex容器的宽度，aspect-ratio就能基于该宽度计算高度：

.box {
  aspect-ratio: 16/9; 
  background: yellow;
  border: 5px solid red; 
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

.flex .box {
  width: 100%;
}

方案2：设置flex-grow: 1 #

让子元素占满flex容器的可用空间，自动获得宽度：

.box {
  aspect-ratio: 16/9; 
  background: yellow;
  border: 5px solid red; 
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

.flex .box {
  flex-grow: 1;
}

方案3：禁止收缩并设置基础宽度 #

通过flex-shrink: 0防止子元素被收缩，同时指定宽度：

.box {
  aspect-ratio: 16/9; 
  background: yellow;
  border: 5px solid red; 
  margin-bottom: 20px;
}

.flex {
  display: flex;
}

.flex .box {
  flex-shrink: 0;
  width: 100%; /* 也可以设具体数值，比如300px */
}

修改后的HTML无需变动：

<div class="box"></div>
<div class="flex">
  <div class="box"></div>
</div>

内容的提问来源于stack exchange，提问作者grazdev