IE11下Flex子项重叠问题：寻求无需固定宽度的解决方案

这个问题我之前做IE11兼容项目时也踩过坑，本质是IE11的Flexbox实现有个顽固的bug：当flex容器的子元素没明确设置宽度时，它不会正确计算带换行文本元素的内在宽度，反而强行把元素压缩到最小（变成单行），最后导致文本和底部div重叠。下面给你几个不用固定宽度或calc的可行方案：

方案1：给顶部div加flex-shrink: 0 #

IE11里flex子元素默认flex-shrink: 1，意思是容器空间不够时会被压缩。给顶部文本div设置flex-shrink: 0，直接禁止它被压缩，让它根据自身文本内容自动撑开宽度，底部div依然靠flex-grow:1占满剩余空间：

.top-div {
  flex-shrink: 0;
}
.bottom-div {
  min-height: 200px;
  flex-grow: 1;
}

这个方案最简单直接，几乎不会影响其他浏览器的正常表现。

方案2：给顶部div设置width: auto + 明确white-space: normal #

虽然你说百分比宽度没用，但width: auto在IE11的flex环境下能触发正确的宽度计算。再加上明确声明white-space: normal（默认值，但IE11有时候会因为flex布局异常搞乱这个属性），能确保文本正常换行：

.top-div {
  width: auto;
  white-space: normal;
}
.bottom-div {
  min-height: 200px;
  flex-grow: 1;
}

这个方案适合容器是垂直flex布局的场景（从你的描述看应该是上下排列），width:auto会让顶部div继承容器的可用宽度，文本自然换行，不会被压缩。

方案3：给父容器明确宽度约束 + flex-wrap: nowrap #

如果父容器的宽度是不确定的，给它设置width: 100%（或者让它继承外部元素的宽度），再加上flex-wrap: nowrap，能让IE11正确识别容器的可用空间，从而计算子元素的宽度：

.parent-container {
  display: flex;
  flex-direction: column; /* 假设是垂直布局 */
  flex-wrap: nowrap;
  width: 100%;
}
.top-div {
  /* 无需额外宽度设置 */
}
.bottom-div {
  min-height: 200px;
  flex-grow: 1;
}

这个方案的核心是给IE11一个明确的容器宽度参考，避免它因为无法确定空间而错误压缩子元素。

补充说明 #

IE11的Flexbox实现和标准差异很大，尤其是在内在尺寸计算上。上面的方案都是通过绕过这个bug来解决问题，不会影响Chrome等现代浏览器的正常渲染，也不需要你用固定宽度或calc这种不够灵活的方式。

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