使用flexbox强制div填充页面的剩余高度

Question

我有一个页面，我想以这样的方式设置样式:我有一个导航栏，在它下面有一个固定高度的div，在它下面有一个灵活的div，灵活的div包含两个水平排列的元素，灵活的div应该占据页面的剩余宽度。

我遵循了这个教程，但是我没有达到他们所描述的效果：https://css-tricks.com/boxes-fill-height-dont-squish/

我希望area-2分区占据页面的剩余高度。

我如何才能做到这一点？

Stackblitz：https://stackblitz.com/edit/js-bnrfcu?file=style.css

<div class="nav">
    <h1>Nav</h1>
</div>

<div class="area1">
    <h4>Area1</h4>
</div>

<div class="fill-height">
    <div class="area-2">
        <div class="area-2-a">
            <p>Area-2a</p>
        </div>
        <div class="area-2-b">
            <p1>Area-2b</p1>
        </div>
    </div>
</div>

.nav {
  height: 5rem;
  background-color: aqua;
}

.nav-spacer {
  margin-top: 5rem;
}

.area1 {
  height: 10rem;
  background-color: brown;
}

.fill-height {
  display: flex;
  flex-direction: column;
}

.fill-height > div {
  flex: 1;
}

.area-2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.area-2-a {
  width: 20%;
  background-color: #4f90ff;
}

.area-2-b {
  width: 80%;
  background-color: #2b41ff;
}

Answer 1

让fill-height div使用所有可用的空间min-height: 100%;，但是，没有空间可以填充，好吧，height: 100vh;会处理这个问题。

body {
  height: 100vh;
}

.fill-height {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}