как заполнить блоком div свободное пространство в высоту между предыдущим и последующим блоками по вертикали

Question

Нужно чтобы красный блок заполнил всё пространство между жёлтым и зелёным без скриптов при помощи css. Высота блоков не известна кроме контейнера

div {
  border: solid 1px black;
}

#container {
  width: 100%;
  height: 150px;
  position: absolute;
}

#d1 {
  background-color: yellow;
}
#d2{
 background-color: red;
}
#d3 {
  width: 100%;
  position: absolute;
  bottom: 0;
  background-color: green;
}

<div id="container">
  <div id="d1">1</div>
  <div id="d2">2</div>
  <div id="d3">3</div>
</div>

Answer 1

При помощи свойства display:flex и height:auto можно заставить центральный блок заполнить всё свободное пространства в блоке #container.

Такое решение будет работать, только если высота (height) первого и третьего блока заданы явно.

#d1 {
    height:50px;
}
...
#d3 {
    height:50px;
}

А свойство position принимает значение relative (вместо absolute). Тогда, при изменение высоты #container центральный блок будет заполнять свободное пространство между блоками #d1 и #d3

div {
  border: solid 1px black;
  width: 100%;
  display: block;
}

#container {
  width: 100%;
  height: 150px;
  position: relative;
  display: flex;
  flex-flow: wrap row;
}

#d1 {
  background-color: yellow;
  height: 50px;
}

#d2 {
  background-color: red;
  height: 100%;
}

#d3 {
  width: 100%;
  height: 50px;
  bottom: 0;
  background-color: green;
}

<div id="container">
  <div id="d1">1</div>
  <div id="d2">2</div>
  <div id="d3">3</div>
</div>

Answer 2

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Test</title>
  <style>
    body {
      height: 100%;
    }
    
    div {
      border: solid 1px black;
    }
    
    #container {
      min-height: 150px;
      height: 150px;
      display: flex;
      flex-direction: column;
    }
    
    .box {
      display: flex;
      flex-direction: column;
    }
    
    #d1 {
      background-color: yellow;
    }
    
    #d2 {
      background-color: red;
      flex: 1;
    }
    
    #d3 {
      background-color: green;
    }
  </style>
</head>

<body>
  <div id="container">
    <div class="box" id="d1">1</div>
    <div class="box" id="d2">2</div>
    <div class="box" id="d3">3</div>
  </div>
</body>

</html>

БЛОГ НА HUSL

как заполнить блоком div свободное пространство в высоту между предыдущим и последующим блоками по вертикали

Ответы (2 шт):