title: Responsive flex box design with sticky header
body: <p>I am having problems designing a sticky header for my responsive layout site which uses flex box. I found this fiddle which almost solves my problem, but not quite: <a href="http://jsfiddle.net/RnBhH/2/" rel="nofollow">http://jsfiddle.net/RnBhH/2/</a></p>
  
  <ol>
  <li><p>How can I make the header element height fit the content in the header since the height is different depending on device viewport width?</p></li>
  <li><p>Provided #1 is solved, how can I make the article and the footer to be scrollable while the variable height header sticky to the top?</p>
  
  <pre><code>html, body {
   margin:0;
   height:100%;
   min-height:100%;
  }
  body {
   margin:0;
   display: flex;
   flex-direction: column;
  }
  header {
   flex: 1;
   background:red;
  }
  article {
   flex: 8;
   overflow-y: scroll;
   background:green;
  }
  footer {
   flex: 1;
   background:blue;
  }
  </code></pre></li>
  </ol>