html - altura mínima del contenedor flexible ignorada en IE

css css3

Question

Hasta donde he podido reunir, si trabajo con IE10 / IE11 debería poder usar los términos flexibles estandarizados.

Tengo un contenedor div y 2 hijos divs.

Los 2 divisores secundarios no son mayores de 400 px, por lo que siempre debe haber suficiente espacio para justify-content: space-between .

Quiero que el primer hijo esté en la parte superior y el segundo hijo en la parte inferior.

Esto funciona en Chrome y Firefox pero no en IE, y no tengo idea de por qué.

Cualquier comentario y retroalimentación son bienvenidos.

<div style="display: flex; flex-direction: column; justify-content: space-between; min-height: 400px; background-color: lightyellow;">
  <div style="background-color: red;">
    <h2>Title (variable height)</h2>
    <p>Summary (variable height)</p>
  </div>
  <div style="background-color: orange;">
    <img src="http://avatarbox.net/avatars/img32/tv_test_card_avatar_picture_61484.jpg" />
  </div>
</div>

https://jsfiddle.net/akxn68vm/

Answer 1

IE 10 y 11 tienen una serie de problemas con la representación de flexbox correctamente.

Aquí hay uno: un contenedor flexible no respeta la propiedad de min-height en estos navegadores.

Una solución simple es hacer que su contenedor flexible también sea un elemento flexible.

Simplemente agregue esto a su código (no se necesitan otros cambios):

body {
   display: flex;
   flex-direction: column;
}

violín revisado

Más información: https://github.com/philipwalton/flexbugs#flexbug-3

Answer 2

Según este error, IE11 no procesa los elementos correctamente cuando se usa min-height en flexbox.

Parece que el problema se resolvió en Edge, pero IE10-11 no funcionará.