How to have nested div take up available height?

I want to have the .expandToFill div expand to fill the remaining screen height. I built something with flexbox as this seems like the most straightforward solution. It has to be nested in this way, please don't change the html.

Say I don't know the height value of the .menu div.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

https://jsfiddle.net/BAR24/a2m4cjsw/17/

There are similar questions on SO but they don't ask about nested expandable divs.

Edit:
I had accepted an answer but realized it didn't fully resolve this problem. I think its a very common issue and it deserves a fully working solution.

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100%; /* <<------------ HERE */
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

The easiest way that seems to solve the problem, is to add:

.wrapper * {
  height: 100%;
}

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

*,::before,::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.wrapper {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.wrapper * {
  height: 100%;
}

.router {
  flex-grow: 1;
}

.container {
  display: flex;
  flex-direction: column;
}

.menu {
  background-color: red;
  height: 20px;
}

.expandToFill {
  flex-grow: 1;
  background-color: blue;
}

<!-- language: lang-html -->

<div class="wrapper">
  <div class="router">
    <div class="container">
      <div class="menu">
      </div>
      <div class="expandToFill">
      </div>
    </div>
  </div>
</div>

<!-- end snippet -->

JS Fiddle demo.

The reason this works, is because it ensures that all elements take the full vertical space that's available (with the exception of .menu, which has its height set specifically), which allows the rule:

.expandToFill {
  flex-grow: 1;
}

To take effect, as the element now has a defined space into which it can expand.