Use flexbox to force div to fill up remaining height of page

Question

I have a page that I want to style in such a way that I have a nav bar, a fixed height div underneath it and a flexible div underneath that, the flexible div contains two elements arranged horizontally and the flexible div should take up the remaining width of the page.

I followed this tutorial however I am not achieving the effect they describe: https://css-tricks.com/boxes-fill-height-dont-squish/

I'd like the area-2 div to take up the remaining height of the page.

How can I achieve this?

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

Make the fill-height div use all the available space min-height: 100%;, but hey, there is no space to fill, well, height: 100vh; takes care of that.

body {
  height: 100vh;
}

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

Answer 2

You can set body as a flex column container too:

body {
  margin:0;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

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

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

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

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

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

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

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

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

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

see probably a duplicate of your question : Fill remaining vertical space with CSS using display:flex How can I make my flexbox layout take 100% vertical space?