IE11 flex项目垂直溢出

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%设置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