IE11含align-items的flex容器下，如何启用flex列子元素滚动？

我太懂你遇到的这个坑了！IE11的Flex布局兼容性问题真的让人头疼，尤其是align-items和max-height组合的时候，简直是经典bug现场——当你给父flex容器.modal-wrapper设置了align-items: center（或者其他非默认值），子元素.modal-content的max-height就会直接失效，本该出现的滚动条死活不出来，移除align-items就正常，这完全是IE11的布局计算逻辑出了问题。

问题根源 #

IE11在处理flex容器的align-items属性时，会错误地拉伸子元素的高度，忽略子元素设置的max-height，导致内容直接撑破容器，自然没法触发滚动。

两种可行的修复方案 #

根据你的需求（内容溢出时滚动，未溢出时自适应高度，同时保持模态框整体居中），这里有两种靠谱的解决办法：

方案1：添加额外包裹层隔离Flex对齐影响

给需要滚动的.modal-content套一层额外的容器，让这个容器承接父级的Flex对齐，同时限制自身的最大高度，内部的滚动元素再基于这个容器计算高度：

/* 原.modal-wrapper样式保留align-items:center */
.modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: rgba(0,0,0,0.5);
}

/* 新增的包裹层 */
.modal-content-container {
  max-height: 80vh; /* 按需设置你的最大高度 */
  width: 100%;
  max-width: 500px; /* 模态框的最大宽度 */
  overflow: hidden; /* 关键：隐藏超出容器的部分 */
}

/* 修改后的.modal-content */
.modal-content {
  max-height: 100%;
  overflow-y: auto;
  padding: 2rem;
  background: #fff;
}

对应的HTML结构调整：

<div class="modal-wrapper">
  <div class="modal-content-container">
    <div class="modal-content">
      <!-- 你的内容 -->
    </div>
  </div>
</div>

这个方法的好处是完全保留了.modal-wrapper的align-items: center对齐，模态框整体依然居中，同时内部内容可以正常触发滚动。

方案2：给滚动元素设置align-self: flex-start

如果不想额外加DOM元素，可以直接给.modal-content设置align-self: flex-start，强制它不被父级的align-items拉伸，这样max-height就能正常生效：

.modal-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  width: 100vw;
  background: rgba(0,0,0,0.5);
}

.modal-content {
  max-height: 80vh;
  overflow-y: auto;
  align-self: flex-start; /* 关键：绕过IE11的bug */
  padding: 2rem;
  background: #fff;
  width: 100%;
  max-width: 500px;
}

注意：这个方法会让.modal-content在垂直方向上顶部对齐，但因为父级justify-content: center，水平还是居中的。如果你的模态框需要严格垂直居中，方案1会更合适。

效果验证 #

两种方案都能实现你的需求：当内容未溢出时，.modal-content高度自适应；当内容超出max-height时，自动出现垂直滚动条，同时在IE11中也能正常工作。

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