IE11 гибкий элемент переполняется по вертикали

Question

Мне известно, что в вопросах IE много переполнения элементов Flex, но я не смог найти решение для ответа по вертикали.

Если вы запустите Chrome, вы увидите содержимоепрокрутите вертикально с помощью внутренней прокрутки, это относится к max-height родительского.(ожидается)

Однако, если вы запустите в IE 11, он переполняется вместо создания внутренней прокрутки.

Есть идеи?

Редактировать: немного контекста, яЯ пытаюсь создать модальный режим, в котором диалог имеет автоматическую высоту и увеличивается до максимальной высоты, после чего устанавливается внутренняя прокрутка в теле.что-то похожее на https://material -ui.com / demos / dialogs / # scrolling-long-content .(свиток = бумага)

Не уверен, как они сделали IE работает

.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

Немного поиграв,

Мне просто нужно было добавить overflow-y: auto; к .container

Я создал другой пример, если кто-то заинтересован в:

https://codepen.io/kossel-the-styleful/pen/OaaPyq

Answer 2

Просто добавьте max-height: calc(100vh - 50px); к .body (я предполагаю, что 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>

Другой способ - установить height: 100% в .container (я не уверен, почему он работает хорошо, когда я создаю HTML-файл и запускаюсь в IE, ноне работает в HTML-фрагмент здесь)

.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>