#flex-shrink
Legt fest, wie stark ein Flexbox-Element schrumpfen soll, wenn nicht genug Platz vorhanden ist.
default flex-shrink: 1;
Wenn nicht genug Platz in der Hauptachse des Containers vorhanden ist, wird das Element um den Faktor 1 schrumpfen und seinen Inhalt umhüllen.
flex-shrink: 0;
Das Element wird nicht geschrumpft: es behält die Breite, die es braucht, und umschließt nicht seinen Inhalt. Seine Geschwister werden geschrumpft, um dem Zielelement Platz zu machen.
Da das Zielelement seinen Inhalt nicht umschließt, besteht die Möglichkeit, dass der Inhalt des Flexbox-Containers überläuft.
flex-shrink: 2;
Da der Flex-Shrink-Wert relativ ist, hängt sein Verhalten vom Wert des Flexbox-Elements Geschwister ab.
In diesem Beispiel möchte das grüne Element 100 % der Breite ausfüllen. Der benötigte Platz wird aus seinen beiden Geschwistern entnommen und in 4 geteilt:
- 3 Viertel werden dem roten Gegenstand entnommen
- 1 Viertel wird aus dem gelben Gegenstand entnommen
