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>