在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值。在IE眼里，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%; } }，它也可能沿用旧值，导致本应单列显示的布局却出现两列错位。
针对这个问题的解决方案很直白：
- 每个关键的断点，都必须重复声明
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环境下让页面能真正跑起来的硬性条件。
