IE11中height:auto的垂直Flex布局溢出滚动失效问题

嘿，我来帮你搞定这个问题！你的思路已经找对方向了——利用Flex布局来实现头部固定、内容区域自动填充剩余空间并滚动的效果。咱们把代码补全并梳理清楚：

核心CSS要点 #

• 给弹窗容器.popup设置display: flex和flex-direction: column，让内部元素垂直排列
• 头部.header用flex: 0 0 auto，确保它不会被压缩或拉伸，保持自身的高度
• 内容区域.body设置flex: 1 1 auto，用来占据弹窗剩下的所有空间，再加上overflow: auto，当内容超出容器剩余高度时就会自动出现滚动条

完整可运行代码 #

<style>
.wrapper { 
  position: fixed; 
} 
.popup { 
  position: fixed; 
  width: 200px; 
  max-height: 300px; 
  display: flex; 
  flex-direction: column; 
  border: 1px solid black;
  /* 加上margin避免两个弹窗重叠 */
  margin-right: 10px;
} 
.a { 
  left: 0; 
} 
.b { 
  left: 220px; 
} 
.header { 
  flex: 0 0 auto; 
  border: 2px solid green; 
  padding: 8px;
} 
.body { 
  flex: 1 1 auto; 
  overflow: auto; 
  padding: 8px;
}
</style>

<div class="wrapper">
  <div class="popup a">
    <div class="header">弹窗A头部</div>
    <div class="body">
      这是弹窗A的内容<br>
      内容不多，不会滚动<br>
      简单测试文本
    </div>
  </div>
  
  <div class="popup b">
    <div class="header">弹窗B头部</div>
    <div class="body">
      这是弹窗B的长内容<br>
      测试滚动效果<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      行内容<br>
      底部内容
    </div>
  </div>
</div>

效果说明 #

这样设置后，不管头部的内容高度如何变化，内容区域都会自动填充弹窗剩余的空间。当内容区域的内容超出弹窗的max-height:300px限制时，就会在内容区域内部出现滚动条，而不会让整个弹窗超出高度限制。

内容的提问来源于stack exchange，提问作者Bolza