title: How can I combine flexbox and vertical scroll in a full-height app?
body: <p>I want to use a full-height app using flexbox. I found what I want using old flexbox layout module (<code>display: box;</code> and other things) in this link: <a href="https://stackoverflow.com/questions/9251447/css3-flexbox-full-height-app-and-overflow">CSS3 Flexbox full-height app and overflow</a></p>
  
  <p>This is a correct solution for browsers that only support the old version of the flexbox CSS properties.</p>
  
  <p>If I want to try using the newer flexbox properties, I'll try to use the second solution in the same link listed as a hack: using a container with <code>height: 0px;</code>. It makes to show a vertical scroll.</p>
  
  <p>I don't like it a lot because it introduces other problems and it is more a workaround than a solution.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
      height: 100%;    
  }
  #container {
   display: flex;
   flex-direction: column;
   height: 100%;
  }
  #container article {
   flex: 1 1 auto;
   overflow-y: scroll;
  }
  #container header {
      background-color: gray;
  }
  #container footer {
      background-color: gray;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;section id="container" &gt;
      &lt;header id="header" &gt;This is a header&lt;/header&gt;
      &lt;article id="content" &gt;
          This is the content that
          &lt;br /&gt;
          With a lot of lines.
          &lt;br /&gt;
          With a lot of lines.
          &lt;br /&gt;
          This is the content that
          &lt;br /&gt;
          With a lot of lines.
          &lt;br /&gt;
          &lt;br /&gt;
          This is the content that
          &lt;br /&gt;
          With a lot of lines.
          &lt;br /&gt;
          &lt;br /&gt;
          This is the content that
          &lt;br /&gt;
          With a lot of lines.
          &lt;br /&gt;
      &lt;/article&gt;
      &lt;footer id="footer" &gt;This is a footer&lt;/footer&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have prepared a JSFiddle as well with a base example: <a href="http://jsfiddle.net/ch7n6/" rel="noreferrer">http://jsfiddle.net/ch7n6/</a></p>
  
  <p>It is a full-height HTML website and the footer is at the bottom because of the flexbox properties of the content element. I suggest you move the bar between CSS code and result to simulate different height.</p>