IE11中flex:1默认解析为flex:1 1 0%，导致flex-basis为0%而丧失换行判断依据，引发内容溢出；必须显式设置带小数的百分比flex-basis（如33.333%）并配合box-sizing:border-box和flex-wrap:wrap才能可靠换行。
Flex布局在IE11下溢出，根本不是“内容太多”，而是flex-basis被解析为0后，flex-grow强行撑开却没换行锚点——它压根不知道该在哪折行。
flex: 1 在 IE11 中等于 flex: 1 1 0%，不是你写的 flex: 1 1 auto
你写 flex: 1，标准浏览器展开为 flex: 1 1 auto，但 IE11 展开为 flex: 1 1 0%（或 0）。这个 0% 是致命的：它让浏览器失去换行判断依据，所有子项死命挤在一排，直到溢出容器。
- 别依赖
flex: 1或flex: 1 1 auto—— IE11 部分版本会直接忽略auto值 - 想等分又换行？必须显式写
flex: 0 0 33.33%（三栏）或flex: 0 0 50%（两栏） - 百分比必须带小数：用
33.333%，别用33%，IE 对截断敏感，33%可能被当成0 - 配套加
box-sizing: border-box，否则padding和border会让实际宽度超 100%
flex-wrap: wrap 失效，是因为 flex-basis 没提供可测量的“换行触发点”
IE11 不是不支持 flex-wrap，而是它只在“检测到子项基础宽度 > 容器剩余空间”时才换行。如果 flex-basis 是 auto、0 或未声明，它就永远算不出这个比较值。
- 删掉所有
flex-basis: auto—— 这在 IE10/11 是高风险陷阱，常被解析为0 - 给每个参与换行的子项设固定
flex-basis，比如flex-basis: 33.333% - 避免混用
flex-wrap: wrap和flex: 1，后者强制flex-basis: 0%，等于主动关闭换行逻辑 - 响应式断点里必须重写
flex-basis：IE11 不会动态更新已计算的值，移动端需单独加媒体查询覆盖
文字溢出、图标错位、el-step 塌陷，都是 flex-basis 没归零惹的祸
像 el-step、文字省略（text-overflow: ellipsis）这类场景，IE11 会先按文字内容定 flex-basis，再套 flex: 1，结果文字撑不开、图标被压缩、高度塌成一条线。
立即学习“前端免费学习笔记（深入）”；
- 通用解法：所有弹性子项加
flex-basis: 0（对应 IE 的-ms-flex-preferred-size: 0） - 文字省略要更激进：再加
width: 0，然后配flex: 1，IE 下才可靠截断 - 含文字的子项务必加
word-break: break-word，否则 IE11 可能因尺寸误算导致文字溢出容器 - 别在子项上用
margin: auto居中，IE11 支持极差；改用margin-left: auto; margin-right: auto（仅部分生效），或换父容器justify-content
真正麻烦的不是漏写前缀，而是每次调完还溢出，你得先盯住 flex-basis —— 它是 IE11 Flex 计算链的第一环，这一环崩了，后面 flex-grow、flex-wrap、min-width 全都白搭。
