title: Flexbox max-height in IE and Safari
body: <p>I'm trying to get a scrolling container between two static ones via flexbox. The container wrapping these three divs has to have a maximum height of 90vh. The code works fine in Chrome or Firefox but does not in IE or Safari. I already tested some common flexbox-bug workarounds but none of them worked.</p>
  
  <p>Example code:</p>
  
  <pre><code>.outer {
      max-height: 90vh;
      width: 400px;
      display: flex;
      flex-direction: column;
  }
  
  .body {
      flex: 1 1 auto;
      overflow: auto;
  }
  
  &lt;div class="outer"&gt;
      &lt;div class="header"&gt;header&lt;/div&gt;
      &lt;div class="body"&gt;a lot of content&lt;/div&gt;
      &lt;div class="footer"&gt;footer&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>See <a href="https://jsfiddle.net/rqz2g3kz/" rel="nofollow noreferrer">https://jsfiddle.net/rqz2g3kz/</a></p>
  
  <p>Thanks in advance!</p>