css - guia - IE 11: la imagen no se escala correctamente dentro de flexbox

flexbox html

Question

Intento usar flexbox para colocar dos imágenes en una columna. En este caso, el ancho del contenedor div es más pequeño que el ancho de la imagen. El contenedor Div se ajusta perfectamente a la imagen en Chrome, pero no en IE, y no sé por qué.

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

div.inner {
  width: 100%;
  border: 1px solid red;
}

img {
  width: 100%;
  height: auto;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>

https://jsfiddle.net/Yifei/16cpckqk/

Esto es lo que tengo en IE 11:

Answer 1

IE11 parece tener algunos problemas con el valor inicial de la propiedad flex-shrink . Si lo configura en cero (inicialmente está configurado en 1), debería funcionar:

div.outer {
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
div.inner {
  flex-shrink: 0;
  width: 100%;
  border: 1px solid red;
}
img {
  width: 100%;
  height: auto;
}

<div class="outer">
  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>

  <div class="inner">
    <img src="http://placehold.it/480x360">
  </div>
</div>