ie11中flex-basis: auto或省略值被解析为0px，导致子项塌陷、flex-grow失效；须显式写flex-basis: 0px+min-height: 0，父容器设明确height，禁用flex: 1而用flex: 0 0 33.33%等三值写法，并配box-sizing: border-box及-ms-flex前缀。
flex-basis: auto 或省略值在 IE11 中被当成 0px
IE11 不按标准解析 flex-basis: auto，尤其在 flex-direction: column 场景下，它常把 auto 当作 0px 处理，子项直接塌成一条线。这不是渲染延迟，是计算逻辑缺陷——它连“初始高度”都算不出来，后续 flex-grow: 1 就彻底失效。
实操建议：
- 垂直布局必须显式写
flex-basis: 0px（带单位！0或0%在部分版本里会被忽略或截断） - 紧跟着加
min-height: 0，覆盖 IE11 默认的min-height: auto行为 - 父容器必须有明确高度（如
height: 400px），min-height: 100vh在 IE11 里经常计算错误
flex: 1 简写在 IE11 中展开为 flex: 1 1 0% 而非 auto
现代浏览器中 flex: 1 展开为 flex: 1 1 auto，但 IE11 固执地当成 flex: 1 1 0%，甚至某些版本会进一步降级为 0px。结果就是：子项失去宽度基准，flex-wrap: wrap 判定失效、文字省略不触发、等分错乱。
实操建议：
- 禁用
flex: 1，改用显式三值写法：flex: 0 0 33.33%（三栏）或flex: 0 0 50%（两栏） - 小数点不能省——
33%可能被 IE 截断为0，33.33%更安全 - 必须配
box-sizing: border-box，否则padding和border会让实际宽度超 100%
百分比 flex-basis 失效，根源是父容器缺主轴基准尺寸
flex-basis: 50% 没反应？不是语法错，而是父容器没提供可计算的基准：横向布局要 width，纵向布局要 height。若父容器宽高由内容撑开，或祖先节点用了 position: absolute、transform，包含块上下文就被切断，百分比直接退化为 auto。
实操建议：
- 打开 IE11 开发者工具，看「Computed」面板里
flex-basis实际值——如果是auto，就确认是基准缺失 - 检查父容器是否设了
display: flex且flex-direction与你写的百分比方向一致 - 避免在父容器上用
max-width/min-width混合布局，IE11 在断点处可能不重算flex-basis
IE10/11 的 -ms-flex 前缀必须写全，且 display 也要声明
-ms-flex: 1 单独写没用。IE10/11 要求：父容器必须先声明 display: -ms-flexbox，子项再配完整三值 -ms-flex: 0 0 33.33%。漏掉任意一项，弹性行为就静默失效——它不报错，只悄悄走错逻辑路径。
实操建议：
- 不要只写
-ms-flex: 1；必须写-ms-flex: 0 0 33.33%（0%比0px更稳，防压缩工具误删） - 所有子项强制
box-sizing: border-box，否则边框和内边距会让百分比计算失准 - 避免用
calc()写flex-basis，IE11 会直接丢弃整条声明
flex-basis 值看着写了，computed 里却显示 auto 或 0px，而你得一层层查父容器尺寸、前缀完整性、单位是否缺失，才能定位到那个被忽略的 min-height: 0 或少写的 -ms-flex-preferred-size。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
