nicht angemeldet
Hallo,
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
Rolf B