ie11 的 flex-basis 行为严重偏离标准：将 auto 解析为 0、百分比失效、媒体查询不重算，且仅支持 -ms-flex；需强制设置父容器交叉轴约束（如 min-height: 1px）、子项 min-height: 0，并在各断点重复声明完整 -ms-flex 规则。
IE11 对 flex-basis 的计算不是“不准”，而是压根不按标准走——它会把 auto 当 0，把百分比截断失效，甚至在媒体查询切换后继续沿用旧值。不能靠加前缀或微调就能绕过去，必须换思路。
为什么 flex-basis: auto 在 IE11 里等于塌陷？
在 flex-direction: column 场景下，flex-basis 控制的是高度，但 IE11 把 flex-basis: auto 解析为 0px，子项直接塌成一条线。即使写了 min-height，若父容器没显式高度（比如 height: auto），它也完全不触发弹性计算。
-
flex: 1在 IE11 展开为flex: 1 1 0，不是0%或auto，起点就是 0 - 父容器必须带可测量的交叉轴约束：哪怕只写
min-height: 1px，也能让 IE11 启动 stretch 逻辑 - 子项要配
min-height: 0—— 这是关键，否则浏览器默认的min-height: auto会锁死拉伸
IE11 中必须写全 -ms-flex 且参数顺序不能错
IE10/11 不识别标准 flex 属性，只认 -ms-flex，而且对参数顺序极其敏感。漏掉前缀、少一个值、单位写错，都会导致整个声明被忽略。
- 必须同时写两套：
flex: 0 0 33.33%和-ms-flex: 0 0 33.33%，后者不能省 -
-ms-flex: 1 1 auto在部分 IE11 版本会失效，改用-ms-flex: 1 1 0%或-ms-flex: 1 1 0px - 父容器必须设
display: -ms-flexbox（IE10 必须）或display: -ms-flex（IE11），否则子项的-ms-flex形同虚设
响应式切换时 flex-basis 不更新？每个断点都得重写
IE11 不会动态重算已渲染的 flex-basis 值。你在桌面端设了 flex-basis: 50%，切到移动端后，即使媒体查询生效，它仍沿用旧值——这不是缓存，是渲染引擎根本不重走计算流程。
- 不能只改
flex-direction或flex-wrap，必须在每个断点里重复声明flex或-ms-flex - 移动端单列布局要写：
@media (max-width: 768px) { .item { flex: none; -ms-flex: none; width: 100%; } } - 避免在媒体查询中只写
flex-basis: 100%—— IE11 和旧 Safari 会直接忽略
动画和 JS 动态修改 flex-basis 在 IE11 中基本不可行
IE11 完全不支持 flex-basis 的 CSS transition，JS 直接赋值 el.style.flexBasis = '64px' 也常失败，因为会被 flex: 1 等简写覆盖。
- 不要尝试
transition: flex-basis 0.3s，它在 IE11 里就是立即跳变 - JS 控制推荐 class 切换：
.sidebar-collapsed { -ms-flex: 0 0 64px; flex: 0 0 64px; width: 64px; }，再配合overflow: hidden模拟收缩 - 如果必须动画，降级用
transform: scaleX(0.25)或width + overflow，IE11 支持这些
最麻烦的不是写法多，而是 IE11 的 flex-basis 行为在不同上下文里会切换逻辑：column 布局下当高度算，row 下当宽度算，有 flex-wrap 时又优先按内容撑开……没有统一规则，只能按场景一个个兜底。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
