title: Flexbox 100% height Issue
body: <p>I have found the following links... but it still doesn't help me...</p>
  
  <p><a href="https://stackoverflow.com/questions/18639129/how-to-make-nested-flexboxes-work">how to make nested flexboxes work</a><br>
  <a href="https://stackoverflow.com/questions/20959600/height-100-on-flexbox-column-child">Height 100% on flexbox column child</a><br>
  <a href="https://stackoverflow.com/questions/15381172/how-to-make-flexbox-children-100-height-of-their-parent">How to make flexbox children 100% height of their parent?</a></p>
  
  <p>I need a full page that is responsive, like the following image:
  <a href="https://i.stack.imgur.com/qVu8I.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/qVu8I.jpg" alt="full page"></a>
  With header and footer and the middle 5 columns filling the height equally in the remaining space, and then when I do media queries, fill the screen of the mobile device like so:</p>
  
  <p><a href="https://i.stack.imgur.com/sFRwy.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/sFRwy.jpg" alt="mobile view"></a></p>
  
  <p>Here's the code I have so far...</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;style type="text/css"&gt;
  html,
  body {
    height: 100%;
    margin: 0
  }
  
  .box {
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  
  .box .row {
    border: 1px dotted grey;
  }
  
  .box .row.header {
    flex: 0 1 auto;
    /* The above is shorthand for:
    flex-grow: 0,
    flex-shrink: 1,
    flex-basis: auto
    */
  }
  
  .box .row.content {
    flex: 1 1 auto;
  }
  
  .box .row.footer {
    flex: 0 1 40px;
  }
  
  .yellow-back {
      background: #ffe001;
  }
  
  .red-back {
      background: #e31e25;
  }
  
  .green-back {
      background: #66af45;
  }
  
  .purple-back {
      background: #954294;
  }
  
  .containerFull                                  { position: relative; width: 100%; margin: 0 auto; padding: 0;}
  .containerFull .column,
  .containerFull .columns                         { float: left; display: inline; margin-left: 0px; margin-right: 0px; }
  .containerFull .one-fifth.column                { width: 20%; }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div class="box"&gt;
  
    &lt;div class="row header"&gt;
      &lt;p&gt;&lt;b&gt;header&lt;/b&gt;
        &lt;br /&gt;
        &lt;br /&gt;(sized to content)&lt;/p&gt;
    &lt;/div&gt;
  
      &lt;div class="row content"&gt;
  
          &lt;div class="containerFull"&gt;    
              &lt;div class="one-fifth column green-back"&gt;Here&lt;/div&gt;
              &lt;div class="one-fifth column red-back"&gt;Here&lt;/div&gt;
              &lt;div class="one-fifth column"&gt;Here&lt;/div&gt;
              &lt;div class="one-fifth column yellow-back"&gt;Here&lt;/div&gt;
              &lt;div class="one-fifth column purple-back"&gt;Here&lt;/div&gt;
          &lt;/div&gt;&lt;!-- ContainerFull --&gt;
  
      &lt;/div&gt;
  
    &lt;div class="row footer"&gt;
      &lt;p&gt;&lt;b&gt;footer&lt;/b&gt; (fixed height)&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <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%;
    margin: 0
  }
  
  .box {
    display: flex;
    flex-flow: column;
    height: 100%;
  }
  
  .box .row {
    border: 1px dotted grey;
  }
  
  .box .row.header {
    flex: 0 1 auto;
    /* The above is shorthand for:
        flex-grow: 0,
        flex-shrink: 1,
        flex-basis: auto
        */
  }
  
  .box .row.content {
    flex: 1 1 auto;
  }
  
  .box .row.footer {
    flex: 0 1 40px;
  }
  
  .yellow-back {
    background: #ffe001;
  }
  
  .red-back {
    background: #e31e25;
  }
  
  .green-back {
    background: #66af45;
  }
  
  .purple-back {
    background: #954294;
  }
  
  .containerFull {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
  }
  
  .containerFull .column,
  .containerFull .columns {
    float: left;
    display: inline;
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .containerFull .one-fifth.column {
    width: 20%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="box"&gt;
  
    &lt;div class="row header"&gt;
      &lt;p&gt;&lt;b&gt;header&lt;/b&gt;
        &lt;br /&gt;
        &lt;br /&gt;(sized to content)&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div class="row content"&gt;
  
      &lt;div class="containerFull"&gt;
        &lt;div class="one-fifth column green-back"&gt;Here&lt;/div&gt;
        &lt;div class="one-fifth column red-back"&gt;Here&lt;/div&gt;
        &lt;div class="one-fifth column"&gt;Here&lt;/div&gt;
        &lt;div class="one-fifth column yellow-back"&gt;Here&lt;/div&gt;
        &lt;div class="one-fifth column purple-back"&gt;Here&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- ContainerFull --&gt;
  
    &lt;/div&gt;
  
    &lt;div class="row footer"&gt;
      &lt;p&gt;&lt;b&gt;footer&lt;/b&gt; (fixed height)&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>