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>