CSS aspect-ratio inside a column flex container takes more than parent's height

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?