Соотношение сторон CSS внутри гибкого контейнера столбца занимает больше высоты родительского элемента ⇐ Html

[Anonymous]

Чтобы упростить сложную проблему CSS, я пытаюсь разместить три элемента внутри вертикального гибкого контейнера:
два элемента div с фиксированной высотой и посередине элемент div, который должен сохранять определенное соотношение сторон.
Вот минимальный воспроизводимый пример:
https://codepen.io/qlerebours/pen/XJdqaya?editors=1010

Код: Выделить всё

Проблема:

• синий элемент div занимает всю доступную высоту
• два красных элемента div исчезают (они выталкиваются)
• элемент соотношения сторон не ограничивается оставшимся пространством

Что я ожидать:

• оба красных элемента div остаются видимыми (10 пикселей вверху и внизу)
• синий элемент div занимает только оставшееся пространство
• с сохранением соотношения сторон

Почему соотношение сторон приводит к тому, что этот гибкий элемент расширяется на всю высоту во флексбоксе столбца?
И как я могу сделать элемент соотношения сторон использует только оставшееся пространство, не отталкивая другие элементы?

Подробнее здесь: https://stackoverflow.com/questions/798 ... nts-height