IE11中Flexbox布局文本重叠问题求助

这个IE的flex布局坑我之前也踩过！问题根源在于IE对flex column布局里height: 100%的解析逻辑和标准浏览器不一致，导致childB的高度计算错误，和childA的内容重叠。咱们直接上修复方案：

问题分析 #

在标准浏览器中，flex column容器里的子元素设置height: 100%会基于父容器的剩余空间计算，但IE会错误地以父容器的总高度为参考，导致childB的高度溢出，进而和childA的内容重叠。

修复方案 #

核心是用flex: 1替代height: 100%，让childB自动占据flex容器的剩余空间，同时保留滚动功能。另外可以去掉代码里重复的display: block（flex容器/子元素已经是flex item，不需要额外设置block）。

修改后的完整代码如下：

.parent {
  position: relative;
  border: 1px solid black;
  height: 300px;
  width: 200px;
  display: flex;
  flex-flow: column;
}
.childA {
  background-color: grey;
  width: 100%;
  /* height: auto 是默认值，可省略 */
}
.childB {
  background-color: yellow;
  width: 100%;
  flex: 1; /* 关键：占据父容器剩余高度 */
  overflow: auto; /* 内容过多时滚动 */
  min-height: 0; /* 兼容IE极端场景，防止内容溢出容器 */
}

<div class="parent">
  <div class="childA">
    aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa aaaaaaaaaaaaaaa
  </div>
  <div class="childB">
    bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb bbbbbbbbbbbbbbb
  </div>
</div>

效果验证 #

修改后：

• childA会根据自身内容自动扩展高度，不会挤压childB的空间
• childB会精准占据父容器的剩余高度，内容超出时自动出现滚动条
• 在IE浏览器中也能完美实现你想要的效果，不会再出现内容重叠的问题

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