title: IE display: table-cell child ignores height: 100%
body: <p>I need to dynamically build a table to hold some data.<br>
  I've followed the usual approach of using divs with <code>display: table</code>, <code>display: table-row</code> and <code>display: table-cell</code>:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="false" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.tab {
      display: table;
      height:100%;
      width: 200px;
  }
  
  .row {
      height: 100%;
      display: table-row;
  }
  
  .elem {
      border: 1px solid black;
      vertical-align: top;
      display: table-cell;
      height:100%;
      background: blue;
  }
  
  .content {
      height: 100%;
      background: greenyellow;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="tab"&gt;
      &lt;div class="row"&gt;
          &lt;div class="elem"&gt;
              &lt;div class="content"&gt;
                  Content
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="elem"&gt;
              &lt;div class="content"&gt;
                  Longer content that will need to wrap around eventually you know and don't you hate it when things don't end as you expect them octopus
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/eLo4ge1y/" rel="noreferrer"><strong>Or view on Jsfiddle.</strong></a></p>
  
  <p>In most browsers I get the expected output:</p>
  
  <p><img src="https://i.stack.imgur.com/Thue3.png" alt="Sample image"></p>
  
  <p>However, in IE8 (and possibly later versions, I haven't tested later versions), I get the following:</p>
  
  <p><img src="https://i.stack.imgur.com/UkZoe.png" alt="Sample image 2"></p>
  
  <p>The <code>height: 100%</code> set on the div surrounding <em>"Content"</em> is ignored.</p>
  
  <p>According to <a href="http://caniuse.com/#feat=css-table" rel="noreferrer">CanIUse</a>, IE8 should offer full support for the related display properties.</p>
  
  <p>I've looked through a number of similar questions on SO without finding a working solution: most solutions either rely on Javascript (which I'm  looking to avoid), use a fixed height (ibid previous) or don't work on IE8.</p>