To simplify a complex CSS issue, I’m trying to place three elements inside a vertical flex container:two fixed-height divs, and in the middle a div that should keep a specific aspect-ratio.
Here is a minimal reproducible example:https://codepen.io/qlerebours/pen/XJdqaya?editors=1010
<div style="width: 600px; height: 600px; background-color: black;"><div style="display: flex; flex-direction: column; background-color: green; height: 100%;"><div style="height: 10px; background-color: red;"></div><div style="aspect-ratio: 0.8; background-color: blue;"></div><div style="height: 10px; background-color: red;"></div></div></div>Problem:
- the blue div takes all available height
- the two red divs disappear (they get pushed out)
- the aspect-ratio element does not limit itself to the remaining space
What I expect:
- both red divs stay visible (10px at the top and bottom)
- the blue div takes only the remaining space
- while keeping its aspect-ratio
Why does aspect-ratio cause this flex item to expand to the full height in a column flexbox?And how can I make the aspect-ratio element only use the leftover space without pushing other items away?