title: Div with height 100% and overflow: auto in <= IE10
body: <p>I am having trouble while dealing with a strange issue which occurs only in &lt;= IE 10. Other browsers work as intended. Basically, the <code>ul.list</code> doesn't expand to <code>100%</code> if <code>overflow:auto</code> is used in <strong>&lt;= IE 10</strong>.</p>
  
  <p><a href="http://jsfiddle.net/ebyopvsh/" rel="nofollow">Fiddle</a>. JS Fiddle doesn't work in older versions of IE. I think it won't work in IE 10 as well.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div class="table"&gt;
          &lt;div class="row"&gt;
              &lt;div class="container"&gt;
                  &lt;ul class="list"&gt;
                      &lt;li&gt;Hello!&lt;/li&gt;
                      &lt;li&gt;If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.&lt;/li&gt;
                      &lt;li&gt;The div needs its parent to have a defined height before 100% height works, however that's not an option for you as you've already stated that this is all dynamic content. No problem. We just need the jQuery to push the calculated height to the div after the browser has already rendered it. Simple enough, right?&lt;/li&gt;
                      &lt;li&gt;If I understand what you're trying to do correctly, then I don't think this is possible with CSS while keeping the children absolutely positioned.&lt;/li&gt;
                      &lt;li&gt;And once we get the truth from the TD, we tell the div that the size its parent has reported is the size that it needs to be, and give it back its contenthas reported is the size that it needs to be, and give it back its content.&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#container {
      width: 300px;
      height: 350px;
  }
  .table {
      width:100%;
      height: 100%;
      display: table;
  }
  .row {
      width: 100%;
      height: 100%;
      background: green;
      display: table-row;
  }
  .container {
      position: relative;
      width: 100%;
      height: 100%;
  }
  .list {
      overflow-x: hidden;
      overflow-y: auto;
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
  }
  </code></pre>
  
  <p>I wonder why doesn't it work it in &lt;= IE 10. I know IE has its own rendering engine but it works in IE Edge.</p>
  
  <p>I need to position the list <strong>absolute</strong> because we cannot set max height on a table row. Also, I cannot set <code>max-height: 100%</code> because table row always fit its content. </p>
  
  <h2>Edit:</h2>
  
  <p>I need table based layout so, I can more rows of fixed height. The one with a list will cover the rest of the height available.</p>
  
  <p>I think the problem is that a div with <code>height: 100%</code> in a table row doesn't work. If we look in the layout tab in developer tools we can see. The table row sets its height to 100% but its children won't get a height of <code>100%</code>. Is there workaround for it?</p>