title: How to make inner div to match at least the height of the body?
body: <p>Here's is an example of what I want working fine if the div is a child element of the body using min-height:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  html,body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .outer-wrap{
    min-height: 100%;
  }
  .table-layout{
    display: table;
    min-height: 100%;
    width: 100%;
  }
  .table-cell{
    display: table-cell;
    width: 50%;
    padding: 2%;
  }
  .blue{
    background: #55a;
  }
  .grey{
    background: #bbb;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class="outer-wrap"&gt;
      &lt;div class="table-layout"&gt;
        &lt;div class="table-cell blue"&gt;
          test
        &lt;/div&gt;
        &lt;div class="table-cell grey"&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/OjxmGj" rel="nofollow noreferrer">https://codepen.io/anon/pen/OjxmGj</a></p>
  
  <p>However, when I add an outer div with min-height:100%; the inner div no longer fills the height of the body:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  html,body{
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .outer-wrap{
    min-height: 100%;
  }
  .table-layout{
    display: table;
    min-height: 100%;
    width: 100%;
  }
  .table-cell{
    display: table-cell;
    width: 50%;
    padding: 2%;
  }
  .blue{
    background: #55a;
  }
  .grey{
    background: #bbb;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div class="table-layout"&gt;
        &lt;div class="table-cell blue"&gt;
          test
        &lt;/div&gt;
        &lt;div class="table-cell grey"&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
          content&lt;br /&gt;
          &lt;br /&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><a href="https://codepen.io/anon/pen/JyrNVj" rel="nofollow noreferrer">https://codepen.io/anon/pen/JyrNVj</a></p>
  
  <p>It's not really practical for me to update the entire layout to get this working so I'm hoping there is another way to make this work without removing the outer div.</p>