Internet Explorer - Rapporto immagine Flexbox

Question

Il seguente violino mostra correttamente il rapporto immagine in Chrome/Firefox.

Tuttavia in Internet Explorer le immagini (che dovrebbero essere quadrate) mantengono la loro altezza originale nel layout di flexbox quando vengono ridimensionate per adattarsi al loro contenitore.

http://jsfiddle.net/minlare/knyagjk5/

<section> 
<article> 
    <div class="details"> 
     <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/> 
     <h4>Name</h4> 
     <div class="description"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis.</p> 
     </div> 
    </div> 
</article> 
<article> 
    <div class="details"> 
     <img src="http://i.ytimg.com/vi/rb8Y38eilRM/maxresdefault.jpg" alt="face"/> 
     <h4>Name</h4> 
     <div class="description"> 
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a ultrices lectus. Curabitur molestie volutpat mattis. Fusce fermentum auctor mauris, auctor lacinia mauris ornare faucibus.</p> 
     </div> 
    </div> 
</article> 
</section> 

section{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-flex-wrap: wrap; 
    -moz-flex-wrap: wrap; 
    -ms-flex-wrap: wrap; 
    flex-wrap: wrap; 
} 
article{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -moz-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 

    -webkit-box-align: stretch; 
    -ms-flex-align: stretch; 
    -webkit-align-items: stretch; 
    -moz-align-items: stretch; 
    align-items: stretch; 

    width: 50%; 
    padding-left: 10px; 
    padding-right: 10px; 
    margin-bottom: 20px; 
    box-sizing: border-box; 
} 
.details{ 
    display: -webkit-box; 
    display: -webkit-flex; 
    display: -moz-box; 
    display: -ms-flexbox; 
    display: flex; 

    -webkit-box-direction: normal; 
    -webkit-box-orient: vertical; 
    -webkit-flex-direction: column; 
    -moz-flex-direction: column; 
    -ms-flex-direction: column; 
    flex-direction: column; 

    width: 100%; 
    border: 1px solid #666; 
} 
.image{ 
    width: 100%; 
    max-width: 100%; 
} 
img{ 
    width: 100%; 
    max-width: 100%; 
    height: auto; 
} 
h4{ 
    padding: 10px; 
    margin-bottom: 0; 
} 
.description{ 
    -webkit-box-flex: 1; 
    -webkit-flex-grow: 1; 
    -moz-flex-grow: 1; 
    -ms-flex-positive: 1; 
    flex-grow: 1; 
} 

Come può essere prevenuta/fisso?

Answer 1

Il motivo è uno known documented bug in cui IE10 e IE11 non hanno conservano sempre rapporti intrinseci. E il motivo per cui funziona in IE10 secondo il commento di @ gaynorvader è che il valore predefinito per "flex" in IE10 era 0 0 auto piuttosto che 0 1 auto della specifica finale. Il che significa che in IE10, l'immagine viene vista come flex-grow: 0 come spiegato in flexbug 6

La correzione è quello di impostare l'immagine come flex: none; secondo: http://jsfiddle.net/hexalys/knyagjk5/12/, o aggiungere un contenitore ulteriore intorno ad esso. Ma io consiglierei di non fare immagini di elementi flessibili se non ne hai davvero bisogno. In questo caso, il tuo contenitore article è già un articolo flessibile, quindi non penso che sia necessario creare un altro elemento flessibile annidato dalla classe. Sembra inutile.

Answer 2

Aggiungi un po 'di CSS:

img { 
    min-height: 1px; 
} 

http://jsfiddle.net/mblase75/3Lb5f8pe/

Onestamente, Vorrei sapere il motivo per cui questo funziona. Alla luce di hexalys' answer, suppongo che questa forza IE ricalcoli i rapporti altezza/larghezza. (In ogni caso, ho applicato questo al mio codice proprio ora dove l'elemento interessato è un'etichetta anziché un'immagine, ha funzionato anche lì.)