title: html5: three-rows flexbox with fixed top/bottom and scrollable middle
body: <p>Is it possible to make an <code>html5</code> flexbox layout with fixed <code>header/footer</code> and a scrollable <code>article</code> section like the following for <em>firefox</em> 24 and <em>chromium</em> 31?</p>
  
  <pre><code>+----------+
  | header   |
  +----------+
  | article ||
  |         ||
  |         ||
  |         ||
  +----------+
  | footer   |
  +----------+
  </code></pre>
  
  <p>I've tried this (simplified):</p>
  
  <pre><code>body {
    display: flex;
    flex-direction: column;
  }
  header {
    flex: 1;
  }
  article {
    flex: 8;
    overflow-y: scroll;
  }
  footer {
    flex: 1;
  }
  </code></pre>
  
  <p>and now I'm trying to fill the remain space with the <code>article</code>, but if the contents height is smaller than the window height, the footer is not fixed and if it's bigger, the footer scrolls out of the viewable area...</p>