IE11 flex item overflow vertically

Question

I'm aware of there are many flex item overflow in IE questions here, however I couldn't find the solution for the vertically overflow answer.

If you run in Chrome, you will see the content scroll vertically with an internal scroll, it respect the max-height of the parent. (expected)

However if you run in IE 11, it overflows instead of creating an internal scroll.

any idea?

Edit: A little of context, I'm trying to create a modal where the dialog has auto height and grow until the max-height then set internal scroll in body. something similar to https://material-ui.com/demos/dialogs/#scrolling-long-content. (scroll = paper)

Not sure how they made IE works

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

Answer 1

Just add max-height: calc(100vh - 50px); to .body (I assume header + footer = 50px).

.container {
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  max-height: calc(100vh - 50px);
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
  <div class="header">aa</div>
  <div class="body">
    <div class="content">
      content
    </div>
  </div>
  <div class="footer">ccc</div>
</div>

Another way is set height: 100% to .container (I'm not sure why it works well when I create html file and run in IE, but not work in html snippet here)

.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: blue;
}

.body {
  overflow-y: auto;
  flex: 1 1 auto;
}

.content {
  width: 200px;
  height: 1200px;
}

<div class="container">
    <div class="header">aa</div>
    <div class="body">
        <div class="content">
            content
        </div>
    </div>
    <div class="footer">ccc</div>
</div>