Frage zum Wiki-Artikel „Flex-Container“

[Rolf B]

Hallo nix,

oh je. Geschachtelte Flexboxen. Ein Kopfschmerzgenerator.

Eine wichtige Info ist: Der Default-Wert von flex-shrink ist 1. D.h. Flexbox hat grundsätzlich erstmal das Recht, Elemente schmaler zu machen, wenn nicht genug Platz ist.

Weiter ist wichtig: width ist für ein Flex-Item nicht der Maßstab, sondern der flex-basis Wert. Den legst Du nicht fest, damit ist er "auto". Frag mich aber nicht, wie er "auto" auf die Realität abbildet. Möglicherweise orientiert er sich an width.

Das gilt nicht für die p Elemente im .inner div. Die sind keine Flex-Items und haben daher eine Breite von 27vi.

Die Bestimmung der Größen in einer Flexbox ist kompliziert. Ich nehme für mich nicht Anspruch, das verstanden zu haben. Lies selbst

Grundsätzlich ist es so, dass er den Wert von flex-basis mit flex-shrink multipliziert und die erforderliche Verkleinerung im Verhältnis dieser Werte auf die Flex-Items verteilen soll. Das tut er bei Dir nicht, er verkleinert nicht genug. Und ich habe keine Ahnung, warum.

Wenn Du für die flex-items eine min-width setzt, dann gibst Du eine Untergrenze für die Verkleinerung vor. Deshalb wird .inner auf einmal sehr viel schmaler, die p darin landen untereinander, die Zeile wird viel höher und der Defaultwert von align-items:stretch wird aktiv: die p Elemente A,B,C,D,E werden höher.

Ich hoffe, das hat es etwas erhellt. Ein paar Schatten krieg ich nicht weg.

Rolf