html - propiedad - ¿Cómo puedo hacer que mi diseño de flexbox ocupe un espacio vertical del 100%?




propiedad order css (2)

¿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?


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>

DEMO


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;
}

demo





flexbox