desbordamiento de firefox: no funciona con flexbox nested

Diseñé un diseño de 100% de ancho y 100% de altura con css3 flexbox, que funciona tanto en IE11 (y probablemente en IE10 si la emulación de IE11 es correcta).

Pero Firefox (35.0.1), overflow-y no está funcionando. Como puede ver en este codepen: http://codepen.io/anon/pen/NPYVga

Firefox no está desbordando correctamente. Muestra una barra de desplazamiento

html, body { height: 100%; margin: 0; padding: 0; border: 0; } .level-0-container { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-0-row1 { border: 1px solid black; box-sizing: border-box; } .level-0-row2 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 1px solid black; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } .level-1-col1 { width: 20em; overflow-y: auto; } .level-1-col2 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 4px solid blue; box-sizing: border-box; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .level-2-row2 { -webkit-box-flex: 1; -webkit-flex: 1; -ms-flex: 1; flex: 1; border: 4px solid red; box-sizing: border-box; overflow-y: auto; } 
   
Header text
line
line
line
line
line
line
line
line
line
line
line
line
line
Some text

Some text 2

Some text 3

some text

some text

some text

some text

some text

some test

tl; dr: necesitas min-height:0 en tu .level-0-row2 . ( Aquí hay un codepen con esa corrección ).

Explicación más detallada:

Los elementos Flex establecen un tamaño mínimo predeterminado que se basa en el tamaño intrínseco de sus hijos (que no considera las propiedades de “desbordamiento” en sus hijos / descendientes).

Siempre que tenga un elemento con overflow: [hidden|scroll|auto] dentro de un elemento flexible, debe darle a su ancestro elemento flexible min-width:0 (en un contenedor horizontal flexible) o min-height:0 ( en un contenedor vertical flexible), para deshabilitar este comportamiento de tamaño mínimo, de lo contrario, el artículo flexible se rehusará a encogerse más pequeño que el tamaño de contenido mínimo del niño.

Consulte https://bugzilla.mozilla.org/show_bug.cgi?id=1043520 para obtener más ejemplos de sitios que han sido mordidos por esto. (Tenga en cuenta que esto es solo un metabug para rastrear sitios que se rompieron por este tipo de problema, después de que se implementó este texto de especificación, no es realmente un error en Firefox).

No verá esto en Chrome (al menos, no a partir de esta publicación) porque aún no han implementado este comportamiento de tamaño mínimo . (EDITAR: Chrome ahora ha implementado este comportamiento de tamaño mínimo, pero aún puede colapsar incorrectamente los tamaños mínimos a 0 en algunos casos ).

La respuesta simple es agregar un elemento “fireFoxFlexShield” al lugar donde ocurre el desbordamiento. fireFoxFlexShield es un elemento flexible inmediato, luego pones el overflow-y: scroll al fireFoxFlexShield.

  .textConvBody{ height: 300px; .fireFoxFlexShield{ overflow-y: scroll; height: 100%; .scrollContainer{ width: 100%; max-width: 100%; } } } 

pero ten cuidado porque podría romper el estilo que era compatible con Chrome.