title: How to nest content inside a flex box 'holy grail' layout?
body: <p>My goal is to build a 'Holy-Grail' based layout with flex. The main content area needs to have additional content.
  <a href="https://i.stack.imgur.com/TG4s4.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TG4s4.jpg" alt="HolyGrail with nested content in main section"></a></p>
  
  <p>I am having real trouble aligning the 'Upper Content Left, Upper Content Center, Upper Content Right, Middle Content, and Lower Content' alongside one another and filling the available space.</p>
  
  <p>Here is a <a href="http://codepen.io/mjankowski/pen/xEAEzj" rel="nofollow noreferrer"><strong>codepen</strong></a> I modified in an attempt to nest the content.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    margin: 0;
  }
  .page {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
  }
  .content {
    display: flex;
    flex: 1;
  }
  .contentMain {
    flex: 1;
    background: lightblue;
    min-width: 10em;
  }
  .nav,
  .ads {
    /* 12em is the width of the columns */
    flex: 0 0 12em;
  }
  .nav {
    /* put the nav on the left */
    order: -1;
    background: salmon;
  }
  .ads {
    background: green;
  }
  header,
  footer {
    background: #ccc;
    padding: 4em 1em;
  }
  /*Nested Content*/
  
  .ucleft {
    background-color: gray;
    width: 30%;
    float: left;
  }
  .uccenter {
    background-color: red;
    width: 30%;
    display: inline-block;
  }
  .ucright {
    background-color: lightgray;
    width: 30%;
    float: right;
  }
  .middlecontent {
    background-color: blue;
    width: 100%;
  }
  .lowercontent {
    background-color: orange;
    width: 100%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!-- currently not working in IE, don't know why --&gt;
  
  &lt;body class="page"&gt;
    &lt;header&gt;Header&lt;/header&gt;
    &lt;div class="content"&gt;
      &lt;main class="contentMain"&gt;
        &lt;div class="upperContainer"&gt;
          &lt;div class="ucleft"&gt;UC Left&lt;/div&gt;
          &lt;div class="uccenter"&gt;UC Center&lt;/div&gt;
          &lt;div class="ucright"&gt;UC Right&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="middlecontent"&gt;Middle Content&lt;/div&gt;
        &lt;div class="lowercontent"&gt;Lower Content&lt;/div&gt;
      &lt;/main&gt;
      &lt;nav class="nav"&gt;Nav&lt;/nav&gt;
  
    &lt;/div&gt;
    &lt;footer&gt;Footer&lt;/footer&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>