I want to keep a 5/3 aspect ratio inside a flexbox. I want the box to be 33% of the screen height, and i want to stack two of them on top of each other with a flexbox with flex-direction set to column. This seemingly breaks the aspect ratio. If i set width instead it works again. Is there a way to do this without calculating the width with JavaScript? Should I do something else instead?
Here is a codepen demonstrating the issue. 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;
}