title: transform an old layout to flexbox
body: <p>Currently I have this layout.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>    * {
        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;
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="wrapper"&gt;
    &lt;header&gt;
      &lt;div id="header-top"&gt;
        &lt;p&gt;I am fixed at the top&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="header-middle"&gt;
        &lt;p&gt;I am vertically centered&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="header-bottom"&gt;
        &lt;p&gt;I am stuck at the bottom but not fixed&lt;/p&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How do I use flexbox here to get the same layout.</p>
  
  <ul>
  <li>The html, body and #wrapper needs to expand visually to surround all the child elements.</li>
  <li>The header is to fill the entire viewport.</li>
  <li>The #header-top is fixed at the top containing a logo floated to left and navigation floated to right with no explicit height.</li>
  <li>The #header-middle is to be vertically centered inside the header.</li>
  <li>The #header-bottom is like a sticky footer stuck at the bottom but no fixed.</li>
  </ul>
  
  <p><a href="https://jsfiddle.net/4ao0mjyu/15/" rel="nofollow">Fiddle</a></p>