IE11下CSS弹性盒子响应式布局坍塌修复

在IE11上使用CSS弹性盒子布局时，不少开发者都遭遇过“换行失效”的困扰。其根本原因并非浏览器不支持 flex-wrap: wrap，而是它对 flex-basis: auto 的解析逻辑不同——先撑开子项，再尝试换行，最终导致所有子项挤在一行内，直至溢出容器边界，布局完全失效。

修复思路非常明确：显式设置百分比 flex-basis，例如33.33%，并在每个断点的媒体查询中重复声明。同时，还需补充 min-height: 0 和 box-sizing: border-box 等硬性条件。只有这样，IE11下的弹性盒子布局才能正常运行。

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

一个容易被忽略的细节是：IE11在解析 flex: 1 时，会将其“展开”为 flex: 1 1 0%。其中的 0% 是关键——它直接让渲染引擎放弃宽度锚点，跳过换行判断。在嵌套场景中，主区域的高度被计算为0，整个内容区塌缩成一条线，不可见。

正确的做法如下：

• 改用 flex: 0 0 33.33%（三列）或 flex: 0 0 50%（两列），明确关闭伸缩，告诉浏览器不需要拉伸或压缩。
• 绝不可省略 flex-basis 值。在IE11中，auto、0、0% 几乎都等效于“放弃控制”，布局结果完全不可控。
• 如果子项宽度不均（例如文字长度差异较大），添加 max-width: 100% 防止溢出，不要仅依赖 flex-grow 调节。

响应式断点切换后换行错乱，根因在于IE11不重新计算 flex-basis

另一个常见问题是响应式布局的换行错乱。IE11一旦计算完 flex-basis，就不会随媒体查询动态更新。例如，桌面端设置 flex-basis: 33.33%，切换到移动端时虽然写有 @media (max-width: 768px) { .item { flex-basis: 100%; } }，但IE11可能仍沿用旧值，导致本应单列显示的布局出现两列错位。

解决方案如下：

• 在每个关键断点处，都必须重复声明 flex-basis，不能只写一次而指望继承。
• 使用 flex-basis: 33.33% 比 33% 更安全——IE对小数截断非常敏感，若仅设33%，它可能直接当作0处理，导致换行再次失效。
• 配合 box-sizing: border-box 一起使用，否则内边距和边框会撑破设定的百分比宽度。

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

在后台系统常见的三层嵌套结构中（body → main-layout → content），此问题最容易暴露：若 .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环境下让页面真正可用的硬性条件。