Warum wird die „Mindesthöhe' meines Flex-Containers im IE ignoriert und wie kann ich das beheben?

Mindesthöhe des Flex-Containers wird im IE ignoriert

IE-Browser haben eine berüchtigte Geschichte mit Flexbox-Rendering. Unter diesen Problemen stellt die Mindesthöhe ein besonderes Problem für Flex-Container dar. Entgegen den Erwartungen des Standards ignorieren IE10 und IE11 die Min-Height-Eigenschaft.

Stellen Sie sich ein Szenario vor, in dem ein Container-Div zwei untergeordnete Divs beherbergt. Die untergeordneten Elemente sind weniger als 400 Pixel groß und bieten ausreichend Platz für „justify-content: space-between“. Ziel ist es, das erste Kind oben und das zweite unten auszurichten. Dieses Setup funktioniert einwandfrei in Chrome und Firefox, jedoch nicht im IE.

Die Ursache dieses Problems liegt in einem bestimmten Flexbox-Fehler (Flexbug 3). Um dieses Problem zu beheben, wandelt ein einfacher Workaround den Flex-Container selbst in ein Flex-Element um. Dies kann durch Hinzufügen der folgenden CSS-Regel erreicht werden:

body {
   display: flex;
   flex-direction: column;
}

Durch die Einbindung dieses CSS wird das Problem ohne weitere Änderungen gelöst.

Weitere Informationen finden Sie im offiziellen Flexbug-Repository: https: //github.com/philipwalton/flexbugs#flexbug-3. Dieses Repository bietet Einblicke in verschiedene Flexbox-Fehler und bietet effektive Problemumgehungen.

Das obige ist der detaillierte Inhalt vonWarum wird die „Mindesthöhe' meines Flex-Containers im IE ignoriert und wie kann ich das beheben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!