Zeige alle Blogbeiträge

Flexbox: IE versteht flex:1 nicht richtig

 (Kommentare: 3) | Beitrag empfehlen auf 

Screenshot - IE versteht in vertikalen Layouts flex: 1 nicht so ganz
IE versteht flex: 1 nicht so ganz

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

Ie versteht flex: 1 auto besser
IE versteht flex: 1 auto besser

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.

Gefunden habe ich diesen kleinen Bugfix bei Roland Warmerdam:

Thanx a million.

Mehr Flexbox?

Mehr Flexbox von mir gibt's bei Video2brain aka Lynda aka LinkedIn: 

Viel Spaß dabei! 

 

Peter Müller - Autor und Dozent

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

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

Zeige alle Blogbeiträge

Kommentare

Kommentar von Tobias Hochgürtel |

Habe mir ihre beiden Bücher Einstieg in CSS und Flexbox aus dem Rheinwerk-Verlag zugelegt, vielen Dank für das schreiben dieser Bücher! : )

Danke für den Blog, wo Sie weitere CSS Ausnahmen wie diese hier gut beschreiben und lösen.

Gerne weiter so!

Antwort von Peter Müller

Vielen Dank für das Kompliment zu den Büchern und weiterhin viel Spaß damit. 

Zum "Layouten per Flexbox" erscheint demnächst übrigens ein Videotraining bei video2brain. 

Kommentar von Jochen Graf |

Hallo Peter,
danke, der nachmittag ist gerettet. "FREU!"

gruss jochen

Antwort von Peter Müller

Wundebar, dann noch viel Spaß beim Flexen! 

Kommentar von Jochen Graf |

Hallo Peter,

Man sollte dazu erwähnen, dass das bei den MediaQueries dass erst greift.

Ich finde den Lösungsanatz sehr gut, aber alles im allem ist der Tipp nicht unbedingt brachbar, wenn man es selbst nicht ausprobiert und nicht weiss, wie man diesen Einsetzt.

gruss jochen

Einen Kommentar schreiben

Bitte füllen Sie alle Formularfelder mit einem Sternchen aus.