title: CSS Flex - Filling empty space with divs
body: <p>I am the furthest from a designer and as such look to others for visual design. I have made purchase of a template where the designer used a <code>min-height: 1000px</code> attribute on the main container to ensure that the background colour always stretched to the bottom.</p>
  
  <p>I am trying to correct this and as such came across the following question; <a href="https://stackoverflow.com/questions/90178/make-a-div-fill-the-height-of-the-remaining-screen-space">Make a div fill the height of the remaining screen space</a> - Which clearly identifies the use of the new(ish) css3 flex attributes. However it appears as though perhaps my current structure won't allow for its correct use? or am I approaching it incorrectly?</p>
  
  <h1>CSS:</h1>
  
  <pre><code>body {
    width: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Open Sans',Helvetica, Arial, sans-serif;
    color: #666666;
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
    font-size-adjust: 100%;
    font-weight: 400;
    font-size: 13px;
    line-height: 1.475;
    background-color: #FFF; }
  
  #main {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    background: #e8e8e8; }
  
  #content_wrapper {
    position: relative;
    display: block;
    -webkit-flex: 1;
    flex: 1;
    left: 0px;
    margin-left: 230px; }
  </code></pre>
  
  <h1>HTML Structure:</h1>
  
  <pre><code>&lt;body&gt;
      &lt;header&gt;
          &lt;!-- Header Content Here - This is sticky --&gt;
      &lt;/header&gt;
      &lt;div id="main"&gt;
         &lt;aside id="sidebar_left" class="affix"&gt;&lt;!-- Sidebar Content Here - This is sticky --&gt;&lt;/aside&gt;
         &lt;section id="content_wrapper"&gt;&lt;!-- Webpage Content Here - This can scroll when necessary. --&gt;&lt;/section&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>On pages with appropriate amounts of content, there is nothing wrong with what is seen above. It works the same as the authors original <code>min-height: 1000px</code> solution did, however on short content pages (such as 404 Error etc) the content fills approx 1/3 - 1/2 of the page before stopping.</p>
  
  <p><img src="https://i.stack.imgur.com/gWIFv.png" alt="Flex failing to fill in the gaps!"></p>
  
  <ul>
  <li>I do not have a footer, nor do I plan on implimenting one. (In case it gets asked later)</li>
  <li>I have tried to use <code>height: 100%</code> on the html and body tags to no avail</li>
  <li>I previously attempted to use <code>height:100vh</code> but realized that it would also add height for my header region as it exists within the viewport itself.</li>
  </ul>
  
  <p>How should I be approaching this issue?
  Is Flex the appropriate resolution here?</p>