Warum wird die „Mindesthöhe' meines Flex-Containers in Internet Explorer 10 und 11 ignoriert?

Übersehene Mindesthöhe von Flex-Containern im Internet Explorer

Trotz der weit verbreiteten Unterstützung für standardisierte Flexbox-Eigenschaften zeigen Internet Explorer 10 und 11 ein eigenartiges Verhalten, wenn es geht um Flexcontainer. Ein solches Problem tritt auf, wenn die Eigenschaft „min-height“ ignoriert wird.

Stellen Sie sich ein Container-Div vor, das zwei untergeordnete Divs enthält, von denen jedes eine maximale Höhe von 400 Pixeln hat. Unter Verwendung von CSS-Flex-Eigenschaften justify-content: space-between; soll den vertikalen Raum zwischen den untergeordneten Divs gleichmäßig verteilen. Allerdings funktioniert diese Ausrichtung einwandfrei in Chrome und Firefox, nicht jedoch im Internet Explorer.

Die Lösung liegt darin, den Flex-Container selbst als Flex-Element festzulegen. Durch einfaches Hinzufügen von display: flex; und Flexrichtung: Spalte; Für das Body-Element wird die Min-Height-Eigenschaft des Containers in Internet Explorer 10 und 11 berücksichtigt. Dadurch wird eine ordnungsgemäße Raumverteilung zwischen den untergeordneten Divs sichergestellt.

Diese Problemumgehung behebt den Flexbox-Fehler, der für Internet Explorer-Versionen 10 und 11 spezifisch ist , um ein konsistentes Verhalten in allen modernen Browsern sicherzustellen. Weitere Details zu diesem Problem finden Sie unter https://github.com/philipwalton/flexbugs#flexbug-3.

Das obige ist der detaillierte Inhalt vonWarum wird die „Mindesthöhe' meines Flex-Containers in Internet Explorer 10 und 11 ignoriert?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!