7

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;
}
Torben Nordtorp
  • 156
  • 10

1 Answers1

8

You can give align-items property to the parent then the aspect-ratio will be considered.

Giovanna Di Meglio
  • 141
  • 4