IE11弹性项垂直溢出

Question

我知道这里的IE问题中存在许多flex溢出，但是我无法找到垂直溢出答案的解决方案。

如果您在Chrome中运行，您将看到内容垂直滚动与内部滚动，它尊重父服务器的max-height。(预期)

但是，如果您在IE11中运行，它就会溢出，而不是创建内部滚动。

知道吗？

编辑:一点点上下文，我试图创建一个模式，其中对话框有自动高度和增长，直到最大高度，然后设置内部滚动体。类似于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 (我假设页眉+页脚=50 to )。

​

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

​

Answer 2

玩了一会儿之后，

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

我创建了另一个示例，如果有人感兴趣的话：

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