IE11 flex 项目垂直溢出答案

【问题标题】：IE11 flex item overflow verticallyIE11 flex 项目垂直溢出
【发布时间】：2019-04-30 23:26:26
【问题描述】：

我知道这里的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>

【问题讨论】：

在 .body 上设置最大高度或高度
你能解释一下设置高度是什么吗？页眉/页脚可以有不同的高度，我只想填充主体，这就是我使用 flex:1 1 auto;
因为类主体是溢出的，这就是ie浏览器需要高度规范的地方，也许你需要玩弄这个并找到一个折衷方案，因为ie。

标签： html css flexbox internet-explorer-11

【解决方案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 sn-p中不起作用）

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

【讨论】：

您好，感谢您的回复，我更新了一些我想要实现的内容。
嗨@Yichaoz，你试过我的第二个解决方案了吗？（不知道为什么它不能直接在 SO sn-p 中工作，但是当我创建 html 文件并在浏览器中运行时效果很好），我认为它可能会有所帮助
设置 100% 将强制小对话框的屏幕高度为 100 ?
你的第一个解决方案帮助了我，我也在这里发布了我的最终解决方案

【解决方案2】：

玩了一会儿，

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

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

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

【讨论】：