为什么 Flexbox 中的纵横比 CSS 属性有时会被忽略？

Question

我想在 Flexbox 内保持 5/3 的纵横比。我希望盒子占屏幕高度的 33%，并且我想将其中两个盒子堆叠在一起，并使用 Flexbox 将 Flex-Direction 设置为Column。这似乎打破了纵横比。如果我设置宽度，它会再次起作用。有没有一种方法可以在不使用 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

您可以将align-items属性赋予父级，然后将考虑纵横比。