title: IE 11 incorrect display flex-direction: column
body: <p>I want:</p>
  
  <ul>
  <li>.parent has height based on content, but with max-height</li>
  <li>children have height based on content</li>
  <li>.second has height based on content, but with respect to .parent max-height</li>
  </ul>
  
  <p>But IE do problems. Other browsers work good.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class=buggedFix&gt;
   &lt;div class=parent&gt;
     &lt;div class=first&gt;...&lt;/div&gt;
     &lt;div class=second&gt;&lt;div class=big&gt;...&lt;/div&gt;&lt;/div&gt;
     &lt;div class=third&gt;...&lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>/*.buggedFix{display:flex;}*/
  .parent{display:flex;flex-direction: column;width:250px;max-height:200px;}
  .first{background:pink;flex: 0 1 auto;}
  .third{background:yellow;flex: 0 1 auto;}
  .second{background:brown;flex: 1 1 auto;overflow: auto}
  .big{background:red;height:600px;margin:10px}
  </code></pre>
  
  <p>Bad 1: <a href="https://jsfiddle.net/fpnjwp0j/3/" rel="nofollow noreferrer">https://jsfiddle.net/fpnjwp0j/3/</a><br>
  Bad 2: <a href="https://jsfiddle.net/j53ds1mb/3/" rel="nofollow noreferrer">https://jsfiddle.net/j53ds1mb/3/</a></p>