html - que - Flexbox llena el espacio disponible verticalmente

flexbox ejemplos

Question

Ahora en una fila de flexbox puedo escribir

<div layout="row">
  <div>some content</div>
  <div flex></div> <!-- fills/grows available space -->
  <div>another content</div>
</div>

Me gustaría lograr lo mismo pero verticalmente, como en esta imagen Actualmente, el problema es que el div que debería crecer no tiene ninguna altura, por lo que los dos contenidos están uno debajo del otro. ¡Quiero que mi segundo contenido esté en la parte inferior del contenedor principal, que tiene una altura de corrección! Sé que podría resolver esto colocando el segundo contenido absoluto e bottom: 0; pero ¿puedo lograr esto con flexbox?

Answer 1

Entonces puedes probar esto:

1. flex-direction: column para el contenedor flexible.

2. flex: 1 para el elemento que necesita llenar el espacio restante.

Vea la demostración a continuación donde el flexbox abarca la altura de la ventana flexbox :

body {
  margin: 0;
}
*{
  box-sizing: border-box;
}
.row {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.flex {
  flex: 1;
}
.row, .row > * {
  border: 1px solid;
}

<div class="row">
  <div>some content</div>
  <div class="flex">This fills the available space</div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>

¡Aclamaciones!

Answer 2

Solo necesita usar flex-direction: column en parent y flex: 1 en div medio.

body,
html {
  padding: 0;
  margin: 0;
}
.row {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.row > div:not(.flex) {
  background: #676EE0;
}
.flex {
  flex: 1;
  background: #67E079;
}

<div class="row">
  <div>some content</div>
  <div class="flex"></div>
  <!-- fills/grows available space -->
  <div>another content</div>
</div>