html - grow - flexbox generator

Error de caja flexible con altura máxima en cromo v43

Question

Tengo el siguiente constructo para renderizar un diseño simple con encabezado y pie de página fijo y un cuerpo flexible con contenido desplazable: http://jsbin.com/jokevuyave/1/edit?html,css

<div id="main-view">
  <div class="rows">
    <div class="head">header</div>
    <div class="main scroll"></div>
    <div>footer</div>
  </div>
</div>

y estos son los estilos:

.rows,
.columns {
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.columns {
  flex-direction: row;
  max-height: 100%;
  overflow: hidden;
}

.main {
  flex: 1;
}

.scroll {
  display: flex;
  overflow: hidden;
  position: relative;
  flex-direction: column;
}

.scroll > * {
  margin: 0;
  width: 100%;
  overflow: auto;
}


html,
body,
#main-container,
#main-view,
.scrollable {
  height: 100%;
  margin: 0
}

#main-view > div {
  max-height: 100%;
  display: flex;
}

.head {
  height: 120px
}

Esta construcción funciona bien en Firefox y también en Chrome hasta que se lanzó la versión 43. Ahora la altura de los contenedores es incorrecta, el encabezado y el pie de página no se expanden para mostrar su contenido y el contenedor de contenido establece el contenido del encabezado. ¿Algúna idea de cómo arreglar esto?

Editar

El problema parece ser esta línea:

#main-view > div {
  max-height: 100%;
}

La idea es que la caja solo se expanda si el contenido es demasiado grande.

Cambiarlo a

#main-view > div {
  height: 100%;
}

arregla la altura incorrecta para el contenedor interno, pero ahora la caja siempre tiene la altura del 100%, incluso si el contenido es realmente pequeño.

Answer 1

Hay un problema con max-heigth heigth y flexbox: flexbox portarse mal con max-height

Entonces, la solución es establecer la propiedad de flex en cada contenedor de rows perspicacia de elementos en 0

.rows .main {
  flex: 1;
}

.rows > * {
  flex: 0 0 auto
}