Warum wird die „Mindesthöhe' meines Flex-Containers in IE10 und IE11 ignoriert?

Mindesthöhe des Flex-Containers wird im IE ignoriert

Wenn Sie mit Flexbox in IE10 und IE11 arbeiten, sollten Sie in der Lage sein, standardisierte Flex-Begriffe zu verwenden. Ein Benutzer ist jedoch auf ein Problem gestoßen, bei dem die Min-Height-Eigenschaft eines Flex-Containers in diesen Browsern nicht berücksichtigt wird.

Die angegebene HTML-Struktur enthält ein Container-Div mit zwei untergeordneten Divs, jedes mit variablen Höhen. Das Ziel besteht darin, das erste Kind oben und das zweite Kind unten zu positionieren, wobei der Abstand zwischen ihnen mithilfe von justify-content: space-between gleichmäßig verteilt wird.

Während dieses Setup in Chrome und funktioniert Firefox schlägt im IE fehl. Die Min-Height-Eigenschaft wird ignoriert, was dazu führt, dass der Container die Höhe seines höchsten untergeordneten Elements annimmt.

Die Lösung liegt in der Behebung eines bekannten Problems bei der Flexbox-Darstellung durch den IE. Gemäß der Flexbugs-Dokumentation von GitHub (https://github.com/philipwalton/flexbugs#flexbug-3) haben diese Browserversionen Probleme mit der Einhaltung der Min-Height-Eigenschaft für Flex-Container.

Um das Problem einfach zu beheben Machen Sie den Flex-Container selbst zu einem Flex-Artikel. Ändern Sie das CSS wie folgt:

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

Diese Änderung zwingt das Body-Element, das das Container-Div enthält, dazu, ein Flex-Element zu werden. Folglich wird das Container-Div nun in diesem Kontext als Flex-Unterelement erkannt und seine Min-Height-Eigenschaft wird berücksichtigt.

Die überarbeitete JSFiddle demonstriert die Lösung, wobei der Container nun korrekt die angegebene Min-Höhe einhält .

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