IE11中简单Flexbox示例渲染异常？是否为Bug及修复方案咨询

安全阿岳

2026-5-21

IE11下Flex布局元素重叠的问题分析与修复

这确实是Internet Explorer 11的一个经典已知Flex布局Bug，不少开发者都踩过这个坑。IE11的Flex布局引擎对flex-basis: 0px的解析存在缺陷，它无法正确基于这个值计算容器内元素的基础宽度，最终导致元素被过度压缩甚至重叠显示。

你可以通过以下几种调整CSS的方式来解决这个问题：

改用flex-basis: 0%替代0px
IE11对百分比单位的flex-basis支持更稳定，修改后的代码如下：

<div class="outer">
  <div class="inner">A</div>
  <div class="inner">B</div>
</div>

.outer {
  display: flex;
}
.inner {
  flex-grow: 0;
  flex-basis: 0%; /* 将0px替换为0% */
}

显式添加min-width: 0
给.inner元素强制设置min-width: 0，可以让IE11忽略元素的默认最小内容宽度，正确按照flex-basis的值计算空间：
```
.outer {
  display: flex;
}
.inner {
  flex-grow: 0;
  flex-basis: 0px;
  min-width: 0; /* 添加这一行 */
}
```
使用flex简写属性
用flex简写属性组合flex-grow、flex-shrink和flex-basis，也能避开IE11的解析问题：
```
.outer {
  display: flex;
}
.inner {
  flex: 0 0 0%; /* 依次对应flex-grow、flex-shrink、flex-basis */
}
```