title: Nested flexbox w/ overflow not working in IE10+
body: <p>I have a UI element in my web application that functions as a hovering panel. The panel itself has a header, footer, and content element. The panel will have a maximum height to avoid the panel overflowing from the window (this is updated on the <code>window.onresize</code> event). </p>
  
  <p>Since I'm only required to support IE10 and up, I'm using flexbox to support this layout.</p>
  
  <p>I've managed to get this working cross-browser: <a href="http://jsfiddle.net/Pyn9e/9/" rel="nofollow">http://jsfiddle.net/Pyn9e/9/</a></p>
  
  <p>Try reducing the size of the 'Result' panel, and you'll see that the content panel begins to scroll rather than overflow, but still ensures the header and footer don't disappear.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function setMaxHeight() {
    var maxHeight = $(window).height() - 16;
    $("#panel").css({
      height: maxHeight + "px"
    });
  }
  
  $(window).on("resize", function() {
    setMaxHeight();
  });
  setMaxHeight();
  
  var i = 0;
  
  setInterval(function() {
    var ul = $("#list");
    ++i;
    if (i &lt;= 20) {
      var li = $("&lt;li&gt;").text("Item " + i);
      ul.append(li);
    } else if (i &lt;= 40) {
      ul.children().last().remove();
    } else {
      i = 0;
    }
  }, 60);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
  }
  
  .flex-fixed {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
  }
  
  .flex-var {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
  }
  
  #panel {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 200px;
    color: white;
    overflow: hidden;
  }
  
  #panel &gt; header {
    background: red;
  }
  
  #panel &gt; .content {
    background: blue;
    overflow-y: auto;
  }
  
  #panel &gt; footer {
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="panel" class="flex-container"&gt;
    &lt;header class="flex-fixed"&gt;This is the header&lt;/header&gt;
    &lt;div class="flex-var content"&gt;
      &lt;ul id="list"&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;footer class="flex-fixed"&gt;This is the footer&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, the content of the panel is dynamic and will usually need to host another flexbox (e.g. another header, footer, content). This seems to be quite easy to do in Chrome and Firefox, but I'm having trouble getting IE10 and IE11 to work: <a href="http://jsfiddle.net/Pyn9e/11/" rel="nofollow">http://jsfiddle.net/Pyn9e/11/</a></p>
  
  <p>As you'll see in IE10 and IE11, the panel now overflows the window rather than starting to scroll.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function setMaxHeight() {
    var maxHeight = $(window).height() - 16;
    $("#panel").css({
      height: maxHeight + "px"
    });
  }
  
  $(window).on("resize", function() {
    setMaxHeight();
  });
  setMaxHeight();
  
  var i = 0;
  
  setInterval(function() {
    var ul = $("#list");
    ++i;
    if (i &lt;= 20) {
      var li = $("&lt;li&gt;").text("Item " + i);
      ul.append(li);
    } else if (i &lt;= 40) {
      ul.children().last().remove();
    } else {
      i = 0;
    }
  }, 60);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.flex-container {
    display: -ms-flex;
    display: flex;
    flex-direction: column;
    -ms-flex-direction: column;
  }
  
  .flex-fixed {
    flex: 0 0 auto;
    -ms-flex: 0 0 auto;
  }
  
  .flex-var {
    flex: 0 1 auto;
    -ms-flex: 0 1 auto;
  }
  
  #panel {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 200px;
    color: white;
    overflow: hidden;
  }
  
  #panel &gt; header {
    background: red;
  }
  
  #panel &gt; .content {
    background: blue;
  }
  
  #panel &gt; footer {
    background: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="panel" class="flex-container"&gt;
    &lt;header class="flex-fixed"&gt;This is the header&lt;/header&gt;
    &lt;div class="flex-container flex-var content"&gt;
      &lt;header class="flex-fixed"&gt;Content&lt;/header&gt;
      &lt;ul id="list" class="flex-var" style="overflow-y:scroll; padding: 0; margin:0"&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;footer class="flex-fixed"&gt;This is the footer&lt;/footer&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Can anyone see a way in which I can support IE without altering the layout too much? Thanks.</p>