Was führt dazu, dass ein flexibler Gegenstand neben einem anderen statt gestapelt steht, wenn seine Höhe 100 % beträgt? ⇐ CSS

[Anonymous]

In diesem Beispiel-HTML befindet sich das untergeordnete Flex-Element „B“ neben „A“, obwohl das übergeordnete Element eine Flex-Richtung von Spalte hat.
Das Entfernen von height: 100 % des untergeordneten Elements „B“, das Ändern der Container-Flex-Richtung in Spalte oder das Entfernen von „flex-wrap: wrap“ stoppen dieses Verhalten.
Warum?
Ich gehe davon aus, dass B unter A liegt, da sein übergeordnetes Element eine Flexrichtung der Spalte hat und ein Umbruch auf dieser Achse und der Containerachse zulässig ist.
Bearbeiten: Das vermeintliche Duplikat antwortet nirgends, warum „B“ neben „A“ auf der horizontalen Achse steht.

Code: Select all

Flexbox

.container {
display: flex; /* flex-direction: row */
flex-wrap: wrap;
width: 200px;
background-color: lightgray;
}
.parent {
display: flex;
flex-wrap: wrap;
flex-direction: column;
width: 100%;
}
.child {
width: 100%;
background-color: lightblue;
}
.child--b {
height: 100%;
}





A
B