如何使用flexbox使元素占据剩余的可用高度？

Question

我在flexbox上的页面布局遇到问题，想知道是否有人可以提供帮助！我在https://jsfiddle.net/smvrn7to/1/

的JSFiddle中获得了以下代码

我正在尝试将ID为'notheader'的div扩展到屏幕底部，但是我没有运气。据我了解，如果我在“ notheader” div上使用align-content:stretch应该可以，但是我什么也没得到。

我也尝试过将高度更改为100％，但同样没有影响。

body{
    background-color: blueviolet;
    margin: 0px;
    padding: 0px;
    display: flex;
    align-content: stretch;
    height: 100%;
}

html{
    height: 100%;
}

nav{
    background-color: aqua;
    width: 80px;
    height: 100%;
}

main{
    background: yellow;
    width: 100%
}

header{
    height: 100px;
    background-color: teal;
}

#controls{
    background: tomato;

}

#notnav{
    width: 100%;
    background-color: chartreuse;
    display: flex;
    flex-direction: column;
    height: 100%;
}

#notheader{
    background: white;
}

<nav>
    <p>Nav Bar</p>
</nav>
<div id="notnav">
    <header>Header</header>
    <div id="notheader">not header</div>
    <!-- <div id="controls">controls</div> -->
</div>