Das CSS-Seitenverhältnis innerhalb eines Spalten-Flex-Containers benötigt mehr als die Höhe des übergeordneten Elements ⇐ CSS

[Anonymous]

Um ein komplexes CSS-Problem zu vereinfachen, versuche ich, drei Elemente in einem vertikalen Flex-Container zu platzieren:
zwei Divs mit fester Höhe und in der Mitte ein Div, das ein bestimmtes Seitenverhältnis beibehalten soll.
Hier ist ein minimal reproduzierbares Beispiel:
https://codepen.io/qlerebours/pen/XJdqaya?editors=1010

Code: Select all

Problem:

• das blaue Div nimmt die gesamte verfügbare Höhe ein
• die beiden roten Divs verschwinden (sie werden herausgeschoben)
• das Aspektverhältniselement beschränkt sich nicht auf den verbleibenden Platz

Was ich erwarte:

• beide roten Divs bleiben sichtbar (10 Pixel oben und unten)
• das blaue Div nimmt nur den verbleibenden Platz ein
• unter Beibehaltung seines Seitenverhältnisses

Warum führt das Seitenverhältnis dazu, dass dieses Flex-Element in einer Spalten-Flexbox auf die volle Höhe erweitert wird?
Und wie kann ich dafür sorgen, dass das Aspektverhältnis-Element nur verwendet wird? den verbleibenden Platz, ohne andere Gegenstände wegzuschieben?