Warum wird die „Mindesthöhe' meines Flexbox-Containers im Internet Explorer ignoriert?

Flexbox: Min-Height wird im Internet Explorer ignoriert

Beim Versuch, einen Flex-Container unter Verwendung standardisierter Flexbox-Begriffe in Internet Explorer (IE) zu implementieren In den Versionen 10 und 11 kann es bei Benutzern zu einem Problem kommen, bei dem die angegebene Eigenschaft „min-height“ ignoriert wird. Dies kann zu unerwartetem Verhalten führen, da die Containerhöhe nicht auf einen Mindestwert beschränkt ist.

Problem:

Ein Flex-Container mit zwei untergeordneten Divs zeigt unerwartetes Höhenverhalten im IE. Die untergeordneten Divs haben eine Höhe von weniger als 400 Pixel, aber die Container-Mindesthöheneigenschaft von 400 Pixel wird ignoriert, was zu einem Container führt, der nicht erweitert wird, um die Eigenschaft justify-content: space-between aufzunehmen. Dadurch wird verhindert, dass das erste untergeordnete Div oben und das zweite untergeordnete Div unten ausgerichtet wird.

Lösung:

Um dieses Problem in IE 10 und zu beheben 11 ist es notwendig, den Flex-Container selbst zu einem Flex-Artikel zu machen. Dies kann durch Hinzufügen des folgenden CSS zum Code erreicht werden:

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

Durch Festlegen des Body-Elements als Flex-Element erbt das Container-Div die Flexbox-Eigenschaften und respektiert korrekt die Min-Height-Eigenschaft.

Überarbeitetes Beispiel:

Der aktualisierte Code mit dem Flex-Item-Fix ist in der überarbeiteten Version verfügbar Geige:

<div></div>

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