IE11 弹性项目垂直溢出

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（我不确定为什么在IE中创建html文件和运行时效果很好，但不是在此处的 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>

Answer 2

稍微玩了一下，

我只需要添加 overflow-y: auto; 到 .container

如果有人对以下内容感兴趣，我创建了另一个示例：

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

IE11 弹性项目垂直溢出

IE11 flex item overflow vertically

html

css

flexbox

internet-explorer-11