css3 - basis - inline flex
firefox overflow-y no funciona con flexbox anidado (1)
He diseñado 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 funciona. Como puede ver en este codepen: http://codepen.io/anon/pen/NPYVga
Firefox no está representando el desbordamiento 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;
}
<html>
<body>
<div class="level-0-container">
<div class="level-0-row1">
Header text
</div>
<div class="level-0-row2">
<div class="level-1-col1">
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
line <br/>
</div>
<div class="level-1-col2">
<div class="level-2-row1">
Some text
<p/> Some text 2
<p/> Some text 3
<p/>
</div>
<div class="level-2-row2">
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some test</p>
</div>
</div>
</div>
</div>
</body>
</html>
tl; dr: necesita
min-height:0
en su
.level-0-row2
.
(
Aquí hay un codepen con esa solución
).
Explicación más detallada:
Los elementos flexibles 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 elemento flexible antecesor
min-width:0
(en un contenedor flexible horizontal) o
min-height:0
( en un contenedor flexible vertical), para deshabilitar este comportamiento de tamaño mínimo, o de lo contrario el elemento flexible se negará a reducirse 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; en realidad no es 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 pueden
colapsar incorrectamente los tamaños mínimos a 0 en algunos casos
).