transform an old layout to flexbox

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>