html - uso de flexbox
Problemas de renderizado con flexbox en Firefox y Chrome 48 (1)
La especificación de flexbox se actualizó haciendo que el tamaño mínimo predeterminado de los elementos flexibles sea igual al tamaño del contenido:
min-width: auto
/
min-height: auto
.
Puede anular esta configuración con
min-width: 0
/
min-height: 0
:
.content {
background: yellow;
flex: 1;
display: flex;
flex-direction: column;
min-height: 0; /* NEW */
min-width: 0; /* NEW */
}
http://jsfiddle.net/d4nkevee/1/
Informe de error: https://bugzilla.mozilla.org/show_bug.cgi?id=1043520
Aquí hay algunos detalles de la especificación:
4.5. Tamaño mínimo implícito de artículos flexibles
Para proporcionar un tamaño mínimo predeterminado más razonable para los elementos flexibles, esta especificación introduce un nuevo valor
autocomo el valor inicial de las propiedadesmin-widthymin-heightdefinidas en CSS 2.1. ( leer más )
ACTUALIZAR
Parece que Chrome ha actualizado su comportamiento de representación. Chrome 48 ahora emula Firefox en términos de tamaño mínimo de flexión.
Según los informes en los siguientes enlaces, la solución anterior también debería funcionar en Chrome 48.
Esta pregunta ya tiene una respuesta aquí:
En Chrome 47 (comportamiento correcto):
en Chrome 47, ese div con
.scroll
se desplaza correctamente, tomando la altura al 100% con flex.
En firefox (comportamiento incorrecto):
mientras está en firefox, ese div con
.scroll
usa la altura del contenido y no se desplaza correctamente.
¿Cuál es la solución entre navegadores para este problema?
for (var i = 0; i < 100; i++)
$(".scroll").append("Dynamic content<br>");
body,
html {
margin: 0;
padding: 0;
}
.container {
box-sizing: border-box;
position: absolute;
height: 100%;
width: 100%;
display: flex;
flex-direction: column;
}
.content {
background: yellow;
flex: 1;
display: flex;
flex-direction: column;
}
.scroll {
flex: 1 1 auto;
overflow: scroll;
}
<div class="container">
<div class="bar">Small</div>
<div class="content">
<div>Static content</div>
<div class="scroll"></div>
<div>Static content</div>
</div>
<div class="footer">Small</div>
</div>
Pregunta actualizada para distinguir entre Chrome 47 y Chrome 48.