Two column flexbox layout with fixed div - html

Question

I'm attempting to learn flexbox and I'm trying to achieve the following layout.
+----------+----------+
| |nav |
| header +----------+
| |section |
+----------+----------+
HTML Structure
<header></header>
<nav></nav>
<section></section>
Layout Requirements
Width of each element is exactly 50vw (or 50%)
Header content is always centered and fixed. Takes up 100vh.
Nav content is fixed
Section content is scrollable, overflow is hidden.
Is this even possible with flexbox?
On mobile devices, I want to have all three in a column but that part is easy.

Answer 1

body {
display: flex;
flex-flow: column wrap;
height: 100vh; /* key rule; this tells flex items where to wrap
to form second column */
}
header {
flex: 0 0 100%;
width: 50%;
/* center content */
display: flex;
justify-content: center;
align-items: center;
}
nav, section {
flex: 0 0 50%;
width: 50%;
}
/* non-essential decorative styles */
* { box-sizing: border-box; margin: 0; }
header { background-color: aqua; }
nav { background-color: tomato; }
section { background-color: lightgreen; }
<header>header</header>
<nav>nav</nav>
<section>section</section>
For a detailed explanation and alternative methods see my answer here:
Is it possible for flex items to align tightly to the items above them?

Answer 2

if you want to use flexbox you can get away with doing a dual container layout.
HTML
<div class="flex-container">
<header>Something</header>
<div class="flex-child-container">
<nav>nav</nav>
<section>section</section>
</div>
</div>
CSS
div {
display: flex;
width: 100%;
height: 100%
}
.flex-child-container {
flex-direction: column;
}