title: How do I force element with "display:table" nested in element with "display:table-row" to fill remaining height in MSIE10?
body: <p>While doing some markup, I've discovered, that MSIE10, actually, does not "understand" what I'm trying to explain to it. Here is a reproduction:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;style&gt;
  *
      {
          -webkit-box-sizing: border-box;
          -moz-box-sizing: border-box;
          box-sizing: border-box;
      }
  
  html,
  body
      {
          display: block;
  
          height: 100%;
          width: 100%;
  
          margin: 0px;
          padding: 0px;
      }
  
  body
      {
          background: #eee;
  
          display: table;
      }
  
  body &gt; div.header
      {
          background: #aaa;
  
          display: table-row;
  
          height: 92px;
      }
  
  body &gt; div.header &gt; div.layout
      {
          background: #666;
  
          display: table;
  
          height: inherit;
          width: 100%;
      }
  
  body &gt; div.main
      {
          background: #aaa;
  
          display: table-row;
  
          height: 100%;
      }
  
  body &gt; div.main &gt; div.layout
      {
          background: #666;
  
          display: table;
  
          height: 100%;
          width: 100%;
      }
  
  body &gt; div.main &gt; div.layout &gt; div
      {
          display: table-cell;
      }
  
  div.menu
      {
          background: #fff;
          width: 280px;
      }
  
  div.content
      {
          background: #fff;
      }
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="header"&gt;
      &lt;div class="layout"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
      &lt;div class="layout"&gt;
          &lt;div class="menu"&gt;
          x
          &lt;/div&gt;
          &lt;div class="content"&gt;
          y
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm trying to force <code>div.main &gt; div.layout</code> fill remaining height of body, which works in Chrome, FF, Opera and even Safari. However MSIE ignoring any my attempts to do it. I've tried to use <code>height: inherit</code> for it, but it has no effect too. The other option was to use <code>display: block</code> and make child elements <code>div.menu</code> and <code>div.content</code> to have <code>display: inline-block; height: inherit</code>, but it also failed: I wasn't able (or just dont know how) to make <code>div.content</code> fill remaining width properly.</p>
  
  <p>So here is the question: <strong><em>how can I do that ?</em></strong></p>
  
  <p>Regards.</p>