Flex-Container Min-Höhe im IE ignoriert - html, CSS, CSS3, Internet-Explorer, Flexbox

Soweit ich feststellen konnte, sollte ich bei der Arbeit mit IE10 / IE11 die standardisierten Flex-Bedingungen verwenden können.

Ich habe ein Container-Div und 2 Kind-Divs.

Die 2 untergeordneten Divs sind nicht größer als 400px, daher sollte immer genügend Platz für die justify-content: space-between.

Ich möchte, dass das erste Kind ganz oben ist und das zweite Kind ganz unten.

Dies funktioniert in Chrome und Firefox, aber nicht in IE, und ich habe keine Ahnung, warum.

Alle Kommentare und Rückmeldungen sind willkommen.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
<div style="background-color: red;">
<h2>Title (variable height)</h2>
<p>Summary (variable height)</p>
</div>
<div style="background-color: orange;">
<img src="/images/http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
</div>
</div>

https://jsfiddle.net/akxn68vm/

Antworten:

IE 10 und 11 haben eine Reihe von Problemen mit der korrekten Wiedergabe von Flexbox.

Hier ist eins: Ein Flex-Container respektiert das nicht min-height Eigenschaft in diesen Browsern.

Eine einfache Lösung besteht darin, aus Ihrem Flexbehälter auch einen Flexartikel zu machen.

Fügen Sie dies einfach in Ihren Code ein (keine weiteren Änderungen erforderlich):

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

überarbeitete Geige

Mehr Info: https://github.com/philipwalton/flexbugs#flexbug-3

Gemäß dieser Fehler IE11 rendert die Elemente nicht korrekt, wenn die Mindesthöhe in Flexbox verwendet wird.

Anscheinend wurde das Problem in Edge gelöst, IE10-11 funktioniert jedoch nicht.