如何解决CSS Flex布局在IE11浏览器中的内容溢出Bug？-css教程-PHP中文网

flex: 1 在 IE11 下强制单行不换行，因其被解析为 flex: 1 1 0%，而非标准的 flex: 1 1 auto；0%导致无基准宽度，使 flex-wrap: wrap 失效，无法判断换行点。

如何解决css flex布局在ie11浏览器中的内容溢出bug？

flex: 1 在 IE11 下为什么会强制单行不换行

因为 flex: 1 在 IE11 中被解析为 flex: 1 1 0%，而不是标准浏览器的 flex: 1 1 auto。那个 0% 是关键——它让 IE11 认为子项“没有基准宽度”，导致 flex-wrap: wrap 失效：它根本算不出“该在哪换行”。

常见现象是三栏布局在窄屏下仍死挤一排、文字撑爆容器、el-step 图标塌陷成一条线。

别用 flex: 1 或 flex: 1 1 auto —— IE11 部分版本会把 auto 当作 0
显式写 flex: 0 0 33.333%（三栏）或 flex: 0 0 50%（两栏），小数点不能省，33% 可能被截断为 0
必须配套 box-sizing: border-box，否则 padding 和 border 会让实际宽度超 100%
flex-wrap: wrap 本身没问题，问题出在没给它提供可比较的 flex-basis 值

文字省略（text-overflow: ellipsis）在 IE11 Flex 子项中失效

不是属性没写对，而是 IE11 的 text-overflow 几乎不支持直接作用于 Flex 子项——哪怕你加了 min-width: 0，也大概率无效。

根本原因是 IE11 对 Flex 子项的宽度计算链断裂：flex-basis 错误 → 宽度不可控 → overflow: hidden 失效 → 省略号画不出来。

page-agent 浏览器控制（CDP）

使用 page-agent CLI（CDP）控制浏览器；CLI只能通过 GitHub Release 的 .tgz 安装，npm 官方包暂未发布。

下载

绕开方案：给文字包一层 ，设 display: block，再在这个内层元素上应用 white-space: nowrap + overflow: hidden + text-overflow: ellipsis + width: 100%
外层 Flex 子项只负责布局，不参与截断逻辑


必须加 word-break: break-word，否则长单词（如 URL）可能因尺寸误算直接溢出
IE11 中 align-items: stretch 不拉伸子项高度
这不是 bug，是 IE11 对 “stretch” 的定义更严格：它要求父容器有明确的交叉轴尺寸（比如 height 或 min-height），且子项不能有任何块级高度约束（如 height、max-height）。

给父 Flex 容器加 height: 1px 或 min-height: 100% 就能触发拉伸（1px 足够，不用写具体值）
子项移除所有 height / max-height，改用 min-height + flex-shrink: 0

表单控件（如 ）默认带 height，需重置：input { height: auto; }


响应式断点里 flex-basis 不更新怎么办
IE11 不会动态重算已渲染的 flex-basis 值。你在桌面端写了 flex-basis: 33.333%，切到移动端后，即使媒体查询生效，IE 仍可能沿用旧值，导致列数错乱。

每个关键断点都必须重复声明 flex-basis，不能只靠继承
例如移动端单列，要写 @media (max-width: 768px) { .item { flex-basis: 100%; } }

避免混用 flex: 1 和 flex-wrap: wrap —— 前者在 IE 下等于主动关闭换行锚点

最麻烦的不是漏写前缀，而是每次调完还溢出，你得先盯住 flex-basis——它是 IE11 Flex 计算链的第一环，这一环崩了，后面全乱。