title: CSS flexbox: Header, main, footer layout. Main part collapsing in the middle
body: <p>I have a simplest situation with</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Whatever&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;header&gt;&lt;/header&gt;
  &lt;main&gt;&lt;/main&gt;
  &lt;footer&gt;&lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>So I want my header to be say .. 15%, my footer 5% and my main part taking the rest of the space in the middle.
  I can do it with position fixed and all that but I am trying to figure out the flex boxes.
  So all my attempts don't work.
  According to this article: <a href="https://hacks.mozilla.org/2013/12/application-layout-with-css3-flexible-box-module/" rel="noreferrer">Flexbox layout</a> I should have it as simple as this:</p>
  
  <pre><code>html, body {
      height: 100%;
      width: 100%;
      padding: 0;
      margin: 0;
  }
  
  body {
      display: flex;
      flex-direction: column;
  }
  
  header {
      height: 75px;
  }
  
  main {
      flex: auto;
  }
  
  footer {
      height: 25px;
  }
  </code></pre>
  
  <p>... but this just does not work. I tried changing sizes from pixels to percentage - no luck. The middle part just collapses and it does not stretch.</p>
  
  <p>I also tried few other examples within the first page of Google hits. Nothing works.</p>
  
  <p>What am I doing wrong. How can I achieve the above with flex boxes?</p>
  
  <p>Thanks.</p>
  
  <p>P.S. Almost forgot. My browser is Chromium 34.0.1847.116 (260972)</p>