html - column - La altura de la imagen en flexbox no funciona en IE

flex-wrap

Question

Tengo una "fila" flexible que contiene 5 "celdas" flexibles que contienen una imagen que se supone que está alineada en el centro.

Funciona perfectamente en Chrome y Firefox, pero no en IE. No obtiene la buena relación. En otros términos, height:auto no funciona en IE cuando la imagen está en un flexbox.

Ya probé varias cosas como flex:none; para la imagen o envuelva la imagen en otro div . Nada funciona.

Lo quiero con la buena relación y totalmente centrado:

Aquí hay un jsFiddle: https://jsfiddle.net/z8op323f/5/

.grid-row {
width: 300px;
height: 300px;
display: flex;
margin: auto;
}
.grid-cell {
height: 100%;
width: 25%;
transition: box-shadow 2s;
display: flex;
}
img {
width: 60%;
margin: auto;
height: auto !important;
min-height: 1px;
}
.long {
width: 80%;
height: auto !important;
}

<div class="grid-row">
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
</div>

Answer 1

intente agregar display: -ms-flexbox; para IE 10

Answer 2

height: auto simplemente significa la altura del contenido. Es un valor predeterminado; no es necesario que lo especifique.

Si elimina height: auto de su código, no cambia nada (en ningún navegador).

De la especificación: 10.5 Altura del contenido: la propiedad de height

El problema parece ser que margin: auto se respeta en Chrome y FF. Pero se ignora (en su mayoría) en IE 11 / Edge.

Esto es probablemente un error. IE11 en particular es conocido por tener muchos flexbugs :

• https://github.com/philipwalton/flexbugs
• http://caniuse.com/#search=flexbox (consulte la pestaña "Problemas conocidos")

Una solución simple de varios navegadores sería usar un margin: auto equivalente:

En lugar de este código en el elemento flexible:

img {
margin: auto;
}

Use esto en el contenedor flexible:

.grid-cell {
display: flex;
justify-content: center;
align-items: center;
}

Para obtener más detalles, consulte el cuadro n. ° 56 aquí: https://.com/a/33856609/3597276.

Fiddle revisado

.grid-row {
width: 300px;
height: 300px;
display: flex;
margin: auto;
}
.grid-cell {
height: 100%;
width: 25%;
transition: box-shadow 2s;
display: flex;
justify-content: center; /* NEW */
align-items: center; /* NEW */
}
img {
width: 60%;
/* margin: auto; */
/* height: auto !important; */
min-height: 1px;
}
.long {
width: 80%;
/* height: auto !important; */
}

<div class="grid-row">
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
<div class="grid-cell">
<img class="long" src="http://placehold.it/350x500">
</div>
</div>