html - altura mínima del contenedor flexible ignorada en IE
css css3 (2)
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;
}
Más información: https://github.com/philipwalton/flexbugs#flexbug-3
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>
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á.