flex container min-height ignorato in IE - html, css, css3, internet-explorer, flexbox

Per quanto ho potuto raccogliere, se lavoro con IE10 / IE11 dovrei essere in grado di usare i termini di flessibilità standardizzati.

Ho un div contenitore e 2 div bambino.

I 2 div div non sono più grandi di 400px, quindi dovrebbe esserci sempre spazio sufficiente per justify-content: space-between.

Voglio che il primo figlio sia completamente in alto e il secondo figlio in fondo.

Funziona con Chrome e Firefox ma non con IE e non ho idea del perché.

Eventuali commenti e feedback sono benvenuti.

<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/

risposte:

IE 10 e 11 hanno una serie di problemi con il rendering corretto di flexbox.

Eccone uno: un contenitore flessibile non rispetta il min-height proprietà in questi browser.

Una soluzione semplice è rendere il tuo contenitore flessibile anche un oggetto flessibile.

Aggiungilo al tuo codice (non sono necessarie altre modifiche):

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

violino modificato

Ulteriori informazioni: https://github.com/philipwalton/flexbugs#flexbug-3

Secondo questo bug IE11 non esegue correttamente il rendering degli elementi quando si utilizza l'altezza minima in flexbox.

Sembra che il problema sia stato risolto in Edge, ma IE10-11 non funzionerà.