IE11 中 flex:1 解析为 flex:1 1 0px 导致宽度坍缩，应改用 flex:1 1 0% 并配合父容器设高度、子项设 min-width:0 和 box-sizing:border-box 等样式修复。
flex:1 在 IE11 里为什么算出 0px 宽度
IE11 把 flex: 1 解析成 flex: 1 1 0px，而不是标准的 flex: 1 1 auto。这个 0px 是所有问题的根源：子项失去初始宽度基准，内容一多就撑开、换行失效、文字省略不触发，甚至直接坍缩成一条线。
必须显式写三值并用百分比单位
别再只写 flex: 1，IE11 不认简写逻辑。要手动拆开，并确保第三个值是 0%：
-
flex: 1 1 0%是目前最稳妥的写法，IE11 和 Edge 16–18 都能正确识别 - 绝对不能用
0或0px——部分 IE11 版本会直接跳过该声明 - 如果还要兼容 IE10，得补私有前缀：
-ms-flex: 1 1 0%，且三项一个都不能少 - 小数点不能省，
33.333%比33%更可靠，避免被截断为 0
配套必须加的样式才能生效
光改 flex 不够，IE11 对盒模型和约束条件极其敏感：
- 父容器必须设明确高度（如
height: 400px或min-height: 100vh），否则flex-grow: 1在 column 方向下完全不计算剩余空间 - 子项加
min-width: 0，否则含长单词或图片时仍会撑破等宽布局 - 必须配
box-sizing: border-box，否则 padding 和 border 会让实际宽度超 100% - 若用
flex-direction: column，还得加min-height: 0覆盖 IE11 默认的min-height: auto，否则子项塌成一条线
calc() 在 IE11 中根本无效，别信它
flex: 0 0 calc(100% / 3) 在 IE11 里会被当无效值丢弃，退化成 auto，等宽立刻失效。
立即学习“前端免费学习笔记（深入）”；
- 方案一：媒体查询中改用固定像素值，比如
flex: 0 0 200px（适合列数固定、容器宽度可控） - 方案二：降级用
display: table+table-layout: fixed，兼容性好但语义弱 - 方案三：用
@supports (flex-basis: 0)包裹现代写法，给 IE 单独写回退样式 - 千万别在 IE11 环境下混用
flex: 1和max-width，它会忽略后者对 Flex 子项的限制
auto 当基准，也不按剩余空间重新分配，更不会自动处理文字换行。每个修复点都得对准它的解析缺陷，漏掉任意一项，布局就可能突然错位。 
