Internet Explorer - Współczynnik proporcji Flexbox

Question

Następujące skrzypce pokazuje poprawnie proporcje obrazu w przeglądarce Chrome/Firefox.

Jednak w programie Internet Explorer obrazy (które powinny być kwadratowe) zachowują swoją oryginalną wysokość w układzie Flexbox podczas zmiany rozmiaru w celu dopasowania do ich kontenera.

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; 
} 

Jak można temu zapobiec/ustalony?

Answer 1

Powodem tego jest known documented bug, gdzie IE10 i IE11 nie miały wartości , zawsze zachowując wewnętrzne współczynniki. I powód, dla którego działa w IE10, jak na komentarz @ gaynorvadera jest taki, że domyślną wartością "flex" w IE10 było 0 0 auto raczej, że ostateczna specyfikacja to 0 1 auto. Co oznacza, że ​​w IE10, obraz jest widziany jako flex-grow: 0 jak wyjaśniono w flexbug 6

Rozwiązaniem jest tu, aby ustawić obraz jako flex: none; wg: http://jsfiddle.net/hexalys/knyagjk5/12/ lub dodać dodatkowy pojemnik wokół niego. Ale radziłbym, żeby w ogóle nie robić elementów graficznych, jeśli tak naprawdę nie potrzebujesz. W tym przypadku Twój kontener article jest już elementem flex, więc nie sądzę, że musisz wykonać kolejny zagnieżdżony element flex z klasy .details. To wydaje się niepotrzebne.

Answer 2

Dodaj jeden bit CSS:

img { 
    min-height: 1px; 
} 

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

Szczerze mówiąc, chciałbym wiedzieć, dlaczego to działa. W świetle hexalys' answer, przypuszczam, że to zmusza IE do ponownego obliczenia stosunków wysokości do szerokości. (W każdym razie, zastosowałem to do mojego własnego kodu właśnie tam, gdzie elementem, którego dotyczy ten problem, jest etykieta zamiast obrazu, działało to również.)