title: flexbox with max-height in IE10
body: <p>I'm trying to find a way to make my flexbox work correctly in IE10:</p>
  
  <p>Here is an example which should work in Chrome, Firefox, etc.</p>
  
  <p><a href="http://jsfiddle.net/vN65r/" rel="nofollow">http://jsfiddle.net/vN65r/</a></p>
  
  <p>I have an absolute-positioned flexbox which has a fixed header, fixed footer, and fill body. The flexbox will take up as much height as it needs, but if it reaches the maximum height then the body will begin to scroll. So far, so good.</p>
  
  <p>However, if you open the link in IE10, it doesn't work. The body now overflows rather than scrolling, causing the both the bottom of the list and the footer to be hidden. The cause seems to be the max-height CSS on .lhs:</p>
  
  <pre><code>max-height: 200px;
  </code></pre>
  
  <p>If this is changed to be just 'height':</p>
  
  <pre><code>height: 200px;
  </code></pre>
  
  <p>Then lo and behold, it works again. However it also stops the flexbox being variable height, so isn't a viable solution for me. Can anyone see how I can make this work in IE10, as well as the other flexbox-supportive browsers?</p>