css - guia - flexbox mal comportamiento con max-height

flex-start

Question

Mi problema es probablemente mejor explicado por el ejemplo. Este siguiente jsfiddle funcionará en Chrome:

http://jsfiddle.net/ga6g4/

Como puede ver, tengo un flexbox de altura fija con un encabezado fijo y un cuerpo desplazable. Hasta ahora tan bueno. Sin embargo, si cambia el CSS de ''height'' del contenedor ''.lhs'' a max-height:

max-height: 100px;

http://jsfiddle.net/ga6g4/1/

Se rompe. ¡Parece que ahora creo que mi lista es ahora de altura cero! ¿Alguna idea de por qué esto está haciendo lo que está haciendo y cómo puedo solucionarlo?

EDITAR: No era lo suficientemente descriptivo en mi publicación original sobre cómo quiero que se comporte esto. Básicamente, el exterior debe usar solo la altura mínima que requiere, pero solo hasta un máximo (definido por la altura máxima). En este punto, quiero que el contenido comience a desplazarse.

Answer 1

Creo que la respuesta es que estás usando flex-direction:column .

Aunque todavía no está del todo claro para mí qué está tratando de lograr cambiar a flex-direction:row parece tener el efecto correcto.

Demostración de JSfiddle

CSS

.lhs {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 250px;
    max-height: 100px;
    border: 1px solid red;
    display: flex;
    flex-direction: row;
}

.panel-container {
    flex: 1;
    overflow: auto;
}

Answer 2

Dándole tanto max-height:100px; y height:100%; Deberia trabajar. http://jsfiddle.net/ga6g4/2/

Answer 3

OK, esta es la solución con la que terminé si alguien está interesado:

http://jsfiddle.net/vN65r/

Básicamente, tuve que aplicar lo siguiente al encabezado de altura fija:

flex: 0 0 auto;

Y lo siguiente a la altura variable, cuerpo de desplazamiento:

flex: 0 1 auto;

Espero que ayude a alguien