IE11中flex子项不缩的根源是min-width: auto无法被覆盖，必须用min-width: 1px；flex-shrink需加-ms-flex-negative前缀；flex-basis必须带%单位；flex-basis过渡需降级为width过渡。
IE11里flex子项死活不缩，根本原因是min-width: auto没被覆盖
IE11对flex子项的默认min-width: auto锁得比现代浏览器更死，且不支持min-width: 0——你写了也当没写。这不是flex-shrink失效，而是收缩逻辑压根没启动。必须用min-width: 1px替代，这是唯一能骗过IE11布局引擎的合法值。
flex-shrink: 0在IE11中需要-ms-flex-negative前缀
直接写flex-shrink: 0在IE11里会被忽略。必须显式加旧版前缀：-ms-flex-negative: 0。如果同时用了flex: 0 0 auto简写，IE11只认其中的-ms-flex: 0 0 auto，原生写法无效。
- 推荐写法：
.item { -ms-flex-negative: 0; flex-shrink: 0; } - 若用PostCSS自动补全，需确认插件配置了IE11前缀规则，否则
flex-shrink: 0不会生成-ms-版本 - 别写
-ms-flex-negative: -1，IE11只接受0或1，负数直接回退到默认值
flex-basis在IE11中必须带%单位
IE11解析flex-basis: 0（无单位）时行为不一致，有时当auto处理，导致等宽或收缩失败。所有flex-basis值必须显式带单位，且优先用%：
-
flex-basis: 0%✅ 安全，IE11能正确识别为“零起点” -
flex-basis: 0px⚠️ 部分场景下被当作固定像素基准，可能干扰flex-grow分配 -
flex-basis: auto❌ 默认行为，内容宽度主导，无法触发均分或收缩
侧边栏/菜单类收缩动画在IE11中必须降级为width过渡
IE11不支持flex-basis的CSS transition，直接写transition: flex-basis 0.3s完全无效。要实现平滑收缩（比如240px→64px），只能改用width：
立即学习“前端免费学习笔记（深入）”；
- 初始状态：
.sidebar { width: 240px; -ms-flex-negative: 0; } - 收缩状态：
.sidebar-collapsed { width: 64px; transition: width 0.3s; } - 配套加
min-width: 1px防止内容撑开，再用overflow-x: hidden截断溢出文本
真正难的不是写哪行代码，而是意识到IE11的Flex引擎根本不是“降级”，而是另一套规则——它不认现代语法，也不报错，只默默按自己的逻辑渲染。漏掉任何一个前缀或单位，整个布局就卡在不可预测的状态里。
