html - CSS Div llenar altura restante

css3 alignment

Question

Esta pregunta ya tiene una respuesta aquí:

• Haz un div lleno de la altura del espacio de pantalla restante 31 respuestas

Por favor ve mi jsfiddle

Quiero que la división intermedia verde llene el espacio restante de la división del contenedor, sin importar la cantidad de contenido que tenga.

Si importa estoy incluyendo bootstrap también.

Answer 1

Dar el recipiente:

display:flex;
flex-direction:column;

y para el elemento:

flex:1;

La demostración: https://jsfiddle.net/ugjfwbg4/1/

body {
  background-color: red;
  height: 100%;
}

.wrap {
  height: 100vh;
  width: 100%;
  padding: 20px;
  background-color: yellow;
  display:flex;
  flex-direction:column;
}

.top {
  width: 100%;
  height: 50px;
  background-color: blue;
}

.mid {
  width: 100%;
  background-color: green;
  flex:1;
  display:flex;
  flex-direction:column;
}

.left{
  flex:1;
  width: 50%;
  background-color: red;
}

.bottom {
  width: 100%;
  height: 50px;
  background-color: blue;
}

<div class="wrap">
  <div class="top"></div>

  <div class="mid">
    
    <div class="left">left</div>
  </div>

  <div class="bottom"></div>
</div>