Frage zum Wiki-Artikel „flex“ hier: flex-shrink
bearbeitet von Matthias ApselHallo,
ich versuche gerade zu verstehen, wie firefox und chrome den flex-shrink Wert interpretieren.
Ich habe folgendes gemacht:
HTML:
<main class="flexcontainer">
<article class="item1">Kiste 1</article>
<article class="item2">Kiste 2</article>
</main>
CSS:
.flexcontainer {display: flex;}
.item1 { flex: 1 1 300px; }
.item2 { flex: 2 2 400px; }
So weit so einfach. Die Summe der Basis-Werte ist 700px, wenn ich den Viewport größer als 700 px ziehe, beispielsweise auf 1000px, so verteilen sich die zusätzlichen 300px im Verhältnis 1:2 auf die beidem Flex-Items. *Kiste 1* wird somit 300px + 100px = 400px groß und *Kiste 2* wird 400px + 200px = 600px groß.
Das Verhalten kann ich in Firefox und Chrome im Inspektor im Layout-Fenster nachvollziehen.
Jetzt die Überraschung (für mich):
Ist der Viewport kleiner als 700px, so hatte ich erwartet, dass die Differenz zu 700px wieder im Verhältnis der shrink-Werte von den Basis-Größen abgezogen würde.
Also:
Ist der Viewport 400px groß, ist er 300px kleiner als die Summe der flex-basis Werte (300px + 400px) und diese 300px zu wenig würden im Verhältnis der shrink-Werte 1:2 aufgeteilt. Der *Kiste 1* würden 100px abgezogen und der *Kiste 2* 200px.
**Das Verhältnis jedoch beträgt: 3:8 !!**
Ein Beispiel mit geraden Werten: Vieport: 480px, *Kiste 1* :240px *Kiste 2* :240px; Die Differenz ist also 220px. Von *Kiste 1* wurden 60px abgezogen, von *Kiste 2* 160px. Das Verhältnis ist also 60 : 160 oder eben: **3:8**.
Kann mir jemand helfen, was ich falsch verstanden habe??
Vielen Dank!
Martin