html - IE11 flex 元素垂直溢出

Question

我知道这里的 IE 问题中有很多 flex item overflow，但是我找不到垂直溢出答案的解决方案。

如果您在 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

只需将 max-height: calc(100vh - 50px); 添加到 .body(我假设页眉 + 页脚 = 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>