html - container - manejo de flexbox
¿Cómo puedo hacer que mi diseño de flexbox ocupe un espacio vertical del 100%? (2)
Debe establecer la height de html, body, .wrapper en 100% (para heredar la altura completa) y luego simplemente establecer un valor flex mayor que 1 en .row3 y no en los demás.
.wrapper, html, body {
height: 100%;
margin: 0;
}
.wrapper {
display: flex;
flex-direction: column;
}
#row1 {
background-color: red;
}
#row2 {
background-color: blue;
}
#row3 {
background-color: green;
flex:2;
display: flex;
}
#col1 {
background-color: yellow;
flex: 0 0 240px;
}
#col2 {
background-color: orange;
flex: 1 1;
}
#col3 {
background-color: purple;
flex: 0 0 240px;
}
<div class="wrapper">
<div id="row1">this is the header</div>
<div id="row2">this is the second line</div>
<div id="row3">
<div id="col1">col1</div>
<div id="col2">col2</div>
<div id="col3">col3</div>
</div>
</div>
¿Cómo puedo decirle a una fila de diseño de Flexbox que consuma el espacio vertical restante en una ventana del navegador?
Tengo un diseño de 3 filas de flexbox. Las dos primeras filas son de altura fija, pero la tercera es dinámica y me gustaría que crezca a la altura máxima del navegador.
Tengo otra flexbox en la fila 3 que crea un conjunto de columnas. Para ajustar correctamente los elementos dentro de estas columnas, necesito que entiendan la altura completa del navegador, por ejemplo, el color de fondo y las alineaciones de elementos en la base. El diseño principal se asemejaría en última instancia a esto:
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
//height: 1000px;
}
.vwrapper #row1 {
background-color: red;
}
.vwrapper #row2 {
background-color: blue;
}
.vwrapper #row3 {
background-color: green;
flex 1 1 auto;
display: flex;
}
.vwrapper #row3 #col1 {
background-color: yellow;
flex 0 0 240px;
}
.vwrapper #row3 #col2 {
background-color: orange;
flex 1 1;
}
.vwrapper #row3 #col3 {
background-color: purple;
flex 0 0 240px;
}
<body>
<div class="vwrapper">
<div id="row1">
this is the header
</div>
<div id="row2">
this is the second line
</div>
<div id="row3">
<div id="col1">
col1
</div>
<div id="col2">
col2
</div>
<div id="col3">
col3
</div>
</div>
</div>
</body>
Intenté agregar un atributo de height , que funciona cuando lo configuro en un número difícil, pero no cuando lo configuro al 100% . Entiendo la height: 100% no funciona, porque el contenido no está llenando la ventana del navegador, pero ¿puedo replicar la idea usando el diseño de la caja flexible?
establecer la envoltura a la altura del 100%
.vwrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
height: 100%;
}
y establecer la tercera fila para crecer y crecer
#row3 {
background-color: green;
flex: 1 1 auto;
display: flex;
}