Flexbox Problem mit IE 11

[MrMurphy]

Hallo,

ich habe ein Problem mit der Darstellung von Flexbox im Zusammenhang mit dem Internet Explorer 11. Im aktuellen Firefox, Chrome umd Opera funktioniert alles wie gewünscht. Ältere Browser sind für mich uninteressant.

Innerhalb eines main-Elements befinden sich zwei section-Elemente.

Bei über 1100px Fensterbreite stehen die im Verhältnis 4 zu 6 nebeneinander.

Zwischen 950px und 1100px Fensterbreite stehen die im Verhältnis 1 zu 1 (also jeweils 50%) nebeneinander.

Das funktioniert in allen genannten Browsern. Wenn das Browserfenster schmaler gezogen wird kann man die Veränderung sehen.

Unter 950px sollen die beiden section-Elemente untereinander rutschen. Und das funktioniert im IE 11 nicht. Dort werden sie direkt übereinander angezeigt.

Wie kann ich das Problem beheben?

Der gesamte Quelltext, auch alle css-Anweisungen, befinden sich im Quelltext der verlinkten Datei:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_01_ie.html

Gruss

MrMurphy

 

[MrMurphy]

Hallo,

ich habe leider immer noch keine Lösung für das Problem gefunden.

Um das Problem besser einzugrenzen habe ich den Quelltext mal auf das unbedingt notwendige reduziert. In den folgenden Dateien befinden sich alls Angaben, also auch alle CSS-Anweisungen, im Quelltext der Datei.

Zunächst habe ich ein Seite mit den einfachsten Anweisungen für die Flexbox erstellt. Also einfach, das die beiden Container article und aside als Flexbox angezeigt werden sollen und das sie ein Größenverhältnis von 1:1 haben sollen. Sowie Hintergrundfarben. Das funktioniert auch in allen Browsern:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_02_ie.html

Dann habe ich zur Kontrolle noch die Anweisung "flex-direction: row;" hinzugefügt. Das ist zwar die Grundeinstellung wie im voherigen Beispiel, aber ich wollte einfach Testen, ob sich an der Darstellung der Browser trotzdem etwas ändert. Das ist aber nicht der Fall:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_03_ie.html

Danach habe ich die Problemeinstellung "flex-direction: column;" eingefügt, so dass die beiden Container eigentlich untereinander angezeigt werden sollten. Das funktioniert im IE 11 leider nicht:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_04_ie.html

Danach habe ich zunächst nach einer Behelfslösung gesucht und in "display: block;" anstatt "display: flex;" gefunden:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_05_ie.html

Aber das ist nicht Sinn der Sache. Wenn ich Flexbox verwende möchte ich natürlich auch deren Möglichkeiten / Vorteile benutzen. Zum Beispiel, das die Anzeigereihenfolge der Container einfach geändert werden kann.

Deshalb habe ich zunächst dem umgebenden Container eine feste Höhe von 100px mit auf den Weg gegeben:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_06_ie.html

(In den meisten Beispielseiten zur Flexbox geben die Autoren ihren Beispielen eine fixe Höhe mit auf den Weg, ohne darauf hinzuweisen, das der IE ohne Höhenangabe Probleme bereitet, Die drücken sich also schlicht um das Problem.)

Das scheint zuächst zu funktionieren. Aber eine Höhenangabe in % funktioniert nicht und die Höhe muss je nach Inhalt angepasst werden. Bei einer Höhenangabe von 1000px sieht die Seite folgendermaßen aus:

http://foreninfo.bplaced.net/seiten_probleme/2014_05_03_flexbox_07_ie.html

Die Flexbox-Größe sollte sich dem Inhalt passen, Die Höhe des Inhalts ändert sich ja bereits, wenn die Fensterbreite schmaler wird.

Ich bin für jeden Tip dankbar, wie ich die Flexbox auch im IE 11 flexibel nutzen kann.

Gruss

MrMurphy

 

[thecain]

Eventuell hilft das: http://css-tricks.com/using-flexbox/ kann es leider nicht testen, da ich keinen IE11 zur Hand habe.

Im IE10 (auf Citrix) zeigts bei mir auch dein Beispiel schon untereinander an

 

[Tronjer]

Muss es denn wirklich Flexbox sein? Ein flexibles Grid bieten doch diverse Frameworks, und zumindest Bootstrap kennt auch column ordering um die Anzeigenreihenfolge zu verändern.

 

[MrMurphy]

Hallo,

hat sich erledigt.

Gruss

MrMurphy

 

[Tronjer]

Wie hast du es denn gelöst?

 

[DefQon1.]

Vielleicht ist der IE ganz einfach auf eine untere Darstellung eingestellt (Darstellung des IE8 z.B), was durchaus mal passieren kann. Ich hatte gerade erst letzte Woche einen Kunden, bei dem genau dies der Fall war und wir 1 monat nach diesem Problem gesucht haben.

Ich interessiere mich aber auch für deine Lösung.

Grüße DefQon1.