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.

Mein Name ist Peter Müller. Ich bin Autor diverser Fachbücher und Videotrainings, Dozent und Webworker.

Hier im Blog schreibe ich Beiträge zu den verschiedensten Themen, aber meistens hat es was mit dem Web zu tun.

Schreibe einen Kommentar