Question

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

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

Answer 2

玩了一点之后，

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

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

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

IE11 flex项目垂直溢出

2 个答案: