Соотношение сторон 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