flex-basis: auto在IE11中等于塌陷，因其将auto解析为0px，且父容器缺交叉轴约束（如height/min-height）时跳过弹性计算；子项需加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 或 min-height），整个弹性计算就跳过，子项直接塌成一条线。
-
flex: 1在 IE11 展开为flex: 1 1 0，不是0%或auto，起点就是0 - 父容器必须带可测量的交叉轴尺寸：哪怕只写
min-height: 1px，也能让 IE11 启动stretch逻辑 - 子项必须加
min-height: 0—— 否则浏览器默认的min-height: auto会锁死拉伸
-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; } - 检测 IE11 可用
document.documentMode，然后改用width + overflow: hidden或transform: scaleX()降级模拟
真正难的不是写对某一行代码，而是意识到 IE11 的 Flex 引擎根本不在同一套语义体系里——它不解析 auto，不重算断点，不响应过渡，所有“理所当然”的行为都要手动补全。漏掉 min-height: 0 或 display: -ms-flex，整个布局就静默失效，连报错都不会有。
