css - internet - IE11-El niño Flex toma altura completa

flex html5

Question

Esta pregunta ya tiene una respuesta aquí:

• Flexbox, min-height e IE11 2 respuestas
• contenedor flexible min-height ignorado en IE 2 respuestas

Tengo un problema con Flexbox en IE11.

Lo que intento hacer es tener un padre con 3 hijos. Un encabezado con un tamaño fijo, un pie de página con un tamaño fijo y entre un área de contenido que debería ocupar el espacio restante.

Aquí está el código: funciona con Chrome pero no con IE11:

.parent {
display: flex;
flex-direction: column;
max-height: 500px;
}
.header {
flex: 0 0 auto;
background: red;
height: 50px;
}
.content {
background: yellow;
flex: 1 1 auto;
position: relative;
overflow-y: scroll;
}
.footer {
flex: 0 0 auto;
background: blue;
height: 50px;
}
.long-item {
height: 2000px;
}

<div class="parent">
<div class="header">Header</div>
<div class="content">
<div class="long-item">Content</div>
</div>
<div class="footer">Footer</div>
</div>

Ya examiné los problemas abiertos pero no pude encontrar una solución.

Answer 1

Ese es uno de los errores de flexión de IE, la min-height cuando se utiliza la column dirección flex "error".

En su caso, agregue display: flex al body y flex-grow: 1; para el parent ( flex-basis: 100% o width: 100% también funcionará).

body {
display: flex;
}
.parent {
flex-grow: 1; /* fill horizontal space */
display: flex;
flex-direction: column;
max-height: 500px;
}
.header {
flex: 0 0 auto;
background: red;
height: 50px;
}
.content {
background: yellow;
flex: 1 1 auto;
position: relative;
overflow-y: scroll;
}
.footer {
flex: 0 0 auto;
background: blue;
height: 50px;
}
.long-item {
height: 2000px;
}

<div class="parent">
<div class="header">Header</div>
<div class="content">
<div class="long-item">Content</div>
</div>
<div class="footer">Footer</div>
</div>