为什么有时会忽略 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 属性 parent 然后 aspect-ratio 将被考虑。

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

Why is aspect-ratio CSS property inside flexbox sometimes ignored?

css

aspect-ratio

flexbox