transform an old layout to flexbox - html

Question

Currently I have this layout.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
min-height: 100%;
}
#wrapper {
height: 100%;
min-height: 100%;
position: relative;
background-color: red;
}
header {
height: 100%;
min-height: 100vh;
position: relative;
background-color: green;
text-align: center;
}
#header-top {
position: fixed;
left: 0;
right: 0;
top: 0;
width: 100%;
outline: 1px dotted red;
background-color: blue;
}
#header-middle {
position: relative;
top: 50%;
transform: translateY(-50%);
background-color: yellow;
outline: 1px dotted red;
}
#header-bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
width: 100%;
background-color: grey;
outline: 1px dotted red;
}
<div id="wrapper">
<header>
<div id="header-top">
<p>I am fixed at the top</p>
</div>
<div id="header-middle">
<p>I am vertically centered</p>
</div>
<div id="header-bottom">
<p>I am stuck at the bottom but not fixed</p>
</div>
</header>
</div>
How do I use flexbox here to get the same layout.
The html, body and #wrapper needs to expand visually to surround all the child elements.
The header is to fill the entire viewport.
The #header-top is fixed at the top containing a logo floated to left and navigation floated to right with no explicit height.
The #header-middle is to be vertically centered inside the header.
The #header-bottom is like a sticky footer stuck at the bottom but no fixed.
Fiddle

Answer 1

Use this:
header {
display: flex; /* Magic begins */
flex-direction: column; /* Stack vertically */
height: 100%; /* As tall as the containing block */
justify-content: space-between; /* Distribute the flex items */
}
* {
padding: 0;
margin: 0;
}
html, body, header {
height: 100%;
}
header {
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: green;
text-align: center;
}
header > div {
outline: 1px dotted red;
}
#header-top {
background-color: blue;
}
#header-middle {
background-color: yellow;
}
#header-bottom {
background-color: grey;
}
<header>
<div id="header-top">
<p>I am fixed at the top</p>
</div>
<div id="header-middle">
<p>I am vertically centered</p>
</div>
<div id="header-bottom">
<p>I am stuck at the bottom but not fixed</p>
</div>
</header>