verschachtelte Flexbox - Probleme mit Firefox und IE
 

Hallo,

ich bin gerade dabei eine Site zu erstellen, die in manchen Bereichen gleichhohe Boxen benötigt. Dazu verwende ich flexbox Funktionalität. In diesem Fall ist diese verschachtelt, da ich den Bereich mit den grauen Boxen auf eine Höhe bringen muss. Ich habe nun das Phänomen, dass das Ganze in Chrome so wie gewünscht dargestellt wird, nicht aber in Firefox und IE. Firefox zeigt nur die Box mit dem längsten Text an, die anderen divs sind nach unten gerutscht. IE zeigt überhaupt keinen Inhalt an. Hat jemand eine Idee, woran das liegen kann?

Anbei ein Codepen Beispiel: A Pen by florian

Hallo

Du benutzt Bootstrap und hast noch zwei zusätzliche CSS-Dateien eingebunden.

Bootstrap ist ein stimmiges und in sich abgeschlossenes Framework. Änderungen durch zusätzliches CSS führen in der Praxis oft zu Problemen.

Die Browser können zwar mit Regeln umgehen, da die eindeutig definiert sind. Die möglichen Fehler oder unsinnige Angaben tendieren hingegen gegen Unendlich, deshalb müssen die Browserersteller selbst entscheiden, wie sie damit umgehen. Dadurch resultieren dann die unterschiedlichen Darstellungen.

Konkreter zu deinem Problem:

Du hast umgebende Container definiert, die wiederum zwei innere Container enthalten:

Der umgebende Container enthält die CSS-Anweisung "overflow: hidden;"

Im oberen der beiden inneren Container (class="view") befindet sich ein Bild. Dieser Container hat per CSS eine Höhe (height) von 100%. Dadurch füllt dieser Container in der Höhe den gesamten umgebenden Container aus.

Dadurch wird der zweite innere, untere, Container aus dem umgebenden Container nach unten herausgeschoben und wegen des "overflow: hidden;" nicht angezeigt.

Du musst also entweder dem overflow:hidden zu Laib rücken oder die Höhe des inneren oberen Containers so verringern, dass der untere noch genügend Platz hat.

Insgesamt würde ich aber eher bei der Verwendung von Bootstrap auf das einfügen von CSS-Anweisungen und damit CSS-Dateien verzichten, wenn deren Auswirkungen nicht bekannt sind. Ansonsten stolperst du nur von einem Problem zum nächsten.

Gruss

MrMurphy

Danke für die Erklärung. Ich habe bei .view die 100% height entfernt, das löste das Probelm :)