如何解决CSS弹性盒子在IE11下的响应式布局坍塌问题？

IE11中flex-wrap换行失效的根本原因是其将flex-basis: auto解析为“先撑开再换行”，必须显式设置百分比flex-basis（如33.33%）并重复声明于各媒体查询中，同时补全min-height: 0和box-sizing: border-box等硬性条件才能正常工作。

IE11里flex-wrap换行失效，不是“不支持”，而是它把flex-basis: auto当成“先撑开再换行”，结果全挤在一行直到溢出——必须显式设百分比flex-basis，否则布局必然坍塌。

为什么flex: 1在IE11里会让容器高度为0或换行消失？

IE11解析flex: 1时固定展开为flex: 1 1 0%，那个0%是致命的：它让引擎放弃宽度锚点，直接跳过换行判断。嵌套场景下还常导致主区域height算出0，整个内容区塌陷成一条线。

• 改用flex: 0 0 33.33%（三列）或flex: 0 0 50%（两列），明确关闭拉伸和压缩
• 绝对不要省略flex-basis值，auto、0、0%在IE里等效于“放弃控制”
• 如果子项宽度不均（比如文字长度差异大），加max-width: 100%防溢出，别只靠flex-grow

响应式断点切换后换行错乱，是因为IE11不重算flex-basis

IE11一旦计算完flex-basis，就不会随媒体查询动态更新。比如桌面端设了flex-basis: 33.33%，切到移动端即使写了@media (max-width: 768px) { .item { flex-basis: 100%; } }，它也可能沿用旧值，导致本该单列却显示两列错位。

• 每个关键断点都必须重复声明flex-basis，不能只写一次
• flex-basis: 33.33%比33%更安全——IE对小数截断敏感，33%可能被当成0
• 配合box-sizing: border-box，否则padding/border会撑破百分比宽度

侧边栏+主内容区自适应滚动时坍塌，根子在min-height: 0漏写

后台系统常见三层嵌套：body → main-layout → content，IE11里只要.content没设min-height: 0，它的overflow: auto就失效，内部长列表直接撑爆页面，而不是触发滚动。

立即学习“前端免费学习笔记（深入）”；

• .main-layout必须设min-height: 0（最容易漏）
• .content用flex: 1 1 0替代flex: 1，并确保其直接子容器有height: 100%
• 侧边栏折叠动画中，从flex: 0 0 64px变到flex: 0 1 200px时，要加min-width: 0防闪动

真正麻烦的不是写多少兼容代码，而是IE11对flex-basis的计算时机完全不可预测——它可能在父容器宽度还没确定时就拍板子项宽度。所以所有百分比值都要带小数、所有断点都要重申、所有min-height: 0都不能省。这些不是“最佳实践”，是IE11环境下能跑通的硬性条件。