为什么Flexbox中的宽高比CSS属性有时会被忽略？[重复]

Question

我想在flexbox中保持5/3宽高比。我想要的框是33%的屏幕高度，我想堆叠其中两个在对方的顶部与flexbox与flex方向设置为列。这似乎打破了宽高比。如果我设置宽度，它再次工作。有没有一种方法可以在不使用JavaScript计算宽度的情况下做到这一点？我应该做些别的吗？

这里有一个代码笔来演示这个问题。https://codepen.io/voxlz/pen/WNjPoqY

html:

<div class='parent'>
  <div class='child'></div>  
  <div class='child'></div>  
  <div class='child'></div>
</div>

css:

.parent {
  display: flex;
  gap: 20px;
  flex-direction: column;
}

.child {
  flex-grow: 0;
  
/*   this works v, aspect perserved */
/*   width: 200px; */
  
/*   this does not v */
  height: 200px; 
  
  aspect-ratio: 5/3;
  background-color: blue;
}

Answer 1

您可以将拟-项属性赋予父属性，然后将考虑宽高比。