title: Can flexbox fill the entire screen without access to the 'body'?
body: <p>In my situation I'm not able to apply flex to the body tag. Can I achieve the same effect (sticky header/footer with the flexbox taking up the full screen) without applying css to the body tag. Here is the relevant code. I commented out the body css that achieves the effect I want.</p>
  
  <p>Thanks,
  Matt</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 {
    height: 100%;
  }
  body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
  }
  */
  .flex-body {
    min-height: 100%;
    display: flex;
    flex-direction:column;
  }
  
  
  
  .main {
    display: flex;
    flex: 1 0 auto;
  }
  
  .nav {
    flex: 0 0 12em;
  }
  
  .content {
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
  }
  
  .row {
    display: flex;
    flex: 1 0 auto;
    flex-direction: row;
    
  }
  .col {
    flex: 1 0 auto;
  }
  
  /* TEMP CODE FOR THIS TEST, REMOVE FOR ACTUAL USE
  */
  body {
    text-align: center;
  }
  
  *{
    box-shadow:inset 0px 0px 0px 1px #f00;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="flex-body"&gt;
  &lt;header class="header"&gt;
   &lt;section class="content"&gt;
   &lt;div class="row"&gt;
    &lt;div class="col"&gt;
     Upper Left
    &lt;/div&gt;
    &lt;div class="col"&gt;
     Upper Middle
    &lt;/div&gt;
    &lt;div class="col"&gt;
     Upper Right
    &lt;/div&gt;
   &lt;/div&gt;
  
   &lt;/section&gt;
  &lt;/header&gt;
  &lt;main class="main"&gt;
   &lt;nav class="nav"&gt;
    Nav
   &lt;/nav&gt;
   &lt;section class="content"&gt;
    &lt;div class="row"&gt;
     &lt;div class="col"&gt;
      Upper Left
     &lt;/div&gt;
     &lt;div class="col"&gt;
      Upper Middle
     &lt;/div&gt;
     &lt;div class="col"&gt;
      Upper Right
     &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
     Middle
    &lt;/div&gt;
    &lt;div class="row"&gt;
     Lower
    &lt;/div&gt;
   &lt;/section&gt;
  &lt;/main&gt;
  &lt;footer class="footer"&gt;Footer&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>