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

Question

我想在 flexbox 中保持 5/3 的纵横比。我希望该框为屏幕高度的 33%，并且我想将其中两个堆叠在一起，并使用 flex-direction 设置为列的 flexbox。这似乎打破了纵横比。如果我设置宽度，它会再次起作用。有没有办法在不使用 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 属性赋予父级，然后将考虑纵横比。