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
}