Flexbox: IE versteht flex:1 nicht richtig

Der Internet Explorer 11 versteht die Flexbox-Syntax. Im Prinzip. Eigentlich. Wohl. So’n bisschen.

However:

Mit flex:1 hat er Probleme, wenn es zusammen mit flex-direction: column benutzt wird.

Fast wie früher beim Floaten. Also irgendwie finde ich es nicht sonderlich schade, dass der „Internet Exploder“ den Weg des Dodo geht…

Ursache

Die Ursache für dieses Kuddelmuddel ist wie folgt:

Die Kurzschreibweise flex:1 steht für drei Werte

  • flex-grow:1
  • flex-shrink: 0
  • flex-basis: 0%

In einem vertikalen Flex-Layout mit flow-direction:column nimmt er flex-basis: 0% wörtlich und erstellt Flex-Items mit 0% Höhe, und der Inhalt fließt über. Sieht nicht gut aus…

Lösung

Abhilfe schafft »das Auto« am Ende der Zeile:

  • flex: 1 auto

Dadurch wird der Wert für flex-basis von 0% auf auto gesetzt, und alles ist wieder in Butter.

Mit auto ist alles in Butter

Gefunden habe ich diesen kleinen Bugfix bei Roland Warmerdam:

Thanx a million.

Diesen Beitrag teilen bei

Schreibe einen Kommentar