IE11中flex-basis不触发文字截断的根本原因是min-width:auto锁死宽度且flex-basis单位缺失导致收缩失效；必须用flex:1 1 0%+min-width:0才能正确启用ellipsis。
flex-basis 在 IE11 中不触发文字截断，根本不是写法错，而是它压根没算出正确宽度——子项实际渲染宽度远超预期，text-overflow: ellipsis 失效只是表象。
flex-basis: 0% 和 flex-basis: 0 的行为差异在 IE11 里会直接决定是否溢出
IE11 对 flex-basis 的单位极其敏感：无单位的 0 被忽略或当 auto 处理，0% 才被稳定识别为“零起点”。而 flex: 1 展开为 flex: 1 1 0%（IE11 实际按此解析），但若你手写 flex-basis: 0 或压缩后变成 0，IE11 就可能跳过收缩逻辑，导致子项按内容撑开。
-
flex: 1 1 0%✅ 推荐，显式带 %，IE11 能启动均分并配合min-width: 0触发截断 -
flex: 1 1 0⚠️ 风险高，CSS 压缩工具常删单位，IE11 行为不可控 -
flex: 1❌ 看似简洁，但 IE11 内部仍用0%，若父容器或子项有其他尺寸干扰（如width、max-width），就容易失准
text-overflow: ellipsis 在 Flex 子项中失效的真正原因
不是 white-space 或 overflow 没设对，而是 IE11 下 Flex 子项默认有 min-width: auto，它会锁死最小宽度，让 flex-basis 失去压缩空间，文字容器始终“觉得自己够宽”，ellipsis 无从触发。
- 必须显式加
min-width: 0（不能省，也不能用min-width: 1px） -
white-space: nowrap和overflow: hidden缺一不可，且要写在同一个元素上 - 如果子项内嵌了
span或a，别指望父级 flex 项自动约束——得套一层<div> 并设 <code>width: 100%，否则 IE11 计算宽度时会漏掉内联元素边界响应式切换时 flex-basis 不更新，溢出问题在断点后突然复现
IE11 不会重算已渲染的
flex-basis值。比如桌面端设了flex-basis: 33.333%，切到移动端后即使媒体查询生效，它仍沿用旧值，导致三栏变一栏时宽度没归零，文字直接溢出。立即学习“前端免费学习笔记（深入）”；
- 每个断点都必须完整重写
flex或-ms-flex，不能只改flex-direction或flex-wrap - 移动端单列布局建议写：
@media (max-width: 768px) { .item { flex: none; -ms-flex: none; width: 100%; } } - 避免只写
flex-basis: 100%—— IE11 和旧 Safari 会直接忽略该声明
侧边栏收缩动画中 flex-basis 被跳过，结果是文字硬截断或撑破容器
IE11 完全不支持
flex-basis的 CSS transition，transition: flex-basis 0.3s在它眼里等于没写。强行用 JS 改style.flexBasis也大概率失败，因为会被flex: 1这类简写覆盖。- 动画必须降级为
width过渡：.sidebar { width: 240px; }→.sidebar-collapsed { width: 64px; transition: width 0.3s; } - 配套加
min-width: 1px防止内容反向撑开，再用overflow-x: hidden截断溢出文本 - 若需 JS 控制，优先用 class 切换而非内联样式：
el.classList.toggle('collapsed')，并在 CSS 中定义两套width+-ms-flex
最易被忽略的一点：IE11 的 Flex 渲染不是“兼容性问题”，而是另一套规则——它不报错、不警告，只默默按自己逻辑走。你看到的溢出，往往是
min-width: auto、flex: 1展开值、媒体查询不重算、以及单位缺失这四者叠加的结果，缺一不可查。 - 每个断点都必须完整重写
