Warum ignoriert IE die „min-height'-Eigenschaft meines Flex-Containers?

IE ignoriert die Mindesthöhe von Flex-Containern

In Internet Explorer 10 und 11 können Flex-Container unerwartetes Verhalten zeigen, wenn es um die Mindesthöhe geht. height-Eigenschaft. Während Flex-Container die definierte Mindesthöhe einhalten sollten, wird sie von IE-Browsern ignoriert.

Um dieses Problem zu beheben, gibt es eine Problemumgehung, indem der Flex-Container selbst zu einem Flex-Element gemacht wird. Indem Sie den folgenden Code zu Ihrem CSS hinzufügen:

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

verwandeln Sie effektiv die gesamte Seite in einen Flex-Container. Dadurch kann der Flex-Container die Min-Height-Eigenschaft im IE berücksichtigen und gleichzeitig das beabsichtigte Layout beibehalten.

Beispiel:

Stellen Sie sich einen Flex-Container mit zwei untergeordneten Divs vor, bei denen die Der Container hat eine Mindesthöhe von 400 Pixel und die untergeordneten Divs sind nicht größer als 400 Pixel. In Chrome und Firefox wäre das Layout wie erwartet mit einem untergeordneten Element oben und dem anderen unten. Im IE würde der Container jedoch auf die Höhe seines Inhalts zusammenfallen und die Eigenschaft „min-height“ ignorieren.

Lösung:

Um dieses Problem zu beheben, implementieren Sie die Problemumgehung durch Umwandlung des Körpers in einen flexiblen Container. Der geänderte Code würde wie folgt aussehen:

<div>

Das obige ist der detaillierte Inhalt vonWarum ignoriert IE die „min-height'-Eigenschaft meines Flex-Containers?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!