ie11 flexbox 塌陷源于三大确定缺陷：未显式设置父容器交叉轴尺寸、错误使用 flex 简写、遗漏 -ms- 前缀；必须设 height/min-height、移除子项硬性高度、补全旧版声明并锚定真实高度值。
IE11 的 Flexbox 塌陷不是“偶尔出错”，而是由几个确定的解析缺陷叠加导致的——不显式锚定高度、错误使用 flex 简写、忽略 -ms- 前缀，三者任缺其一都可能让整个布局归零。
为什么父容器高度为 0 或子项不拉伸
根本原因不是 align-items: stretch 失效，而是 IE11 要求父容器有**明确的交叉轴尺寸**（比如 height 或 min-height），且子项不能带 height、max-height 等硬性高度约束。
- 父容器必须设
height: 1px（够用）、min-height: 200px或min-height: 100vh；min-height: 100%在 IE11 中基本无效 - 子项要移除所有
height、max-height，改用min-height+flex-shrink: 0 -
<input>、<textarea></textarea>等表单控件默认自带height，需重置：input { height: auto; min-height: 1.2em; } - 若父容器是
flex-direction: column，子项撑高靠的是justify-content或自身flex-basis，此时align-items只管水平对齐
flex: 1 导致子项死挤一排、文字溢出
IE11 把 flex: 1 解析为 flex: 1 1 0%，那个 0% 让浏览器认为子项“没有基准宽度”，flex-wrap: wrap 就算写了也形同虚设。
- 禁用
flex: 1和flex: 1 1 auto（IE11 会把auto当0） - 三栏布局写
flex: 0 0 33.333%，两栏写flex: 0 0 50%，小数点不能省，33%可能被截断为0 - 必须配套
box-sizing: border-box，否则padding和border会让实际宽度超限 - 长单词（如 URL）仍可能溢出，需加
word-break: break-word
display: flex 在 IE11 完全不生效
IE11 不认现代 Flexbox 语法，只支持 2012 年草案（-ms-flexbox），且必须新旧声明共存，顺序无关，但 -ms- 必须写在前面才能被识别。
- 必须同时写：
display: -ms-flexbox和display: flex -
justify-content: center→ 补-ms-flex-pack: center（space-between对应distribute） -
align-items: center→ 补-ms-flex-align: center（stretch对应stretch） -
flex-direction: column→ 补-ms-flex-direction: column - 兜底样式（如
float）要写在 Flex 声明之前，否则 IE9+ 会因整块忽略而错乱
文字省略 text-overflow: ellipsis 失效
不是属性漏写，而是 IE11 的 text-overflow 几乎不支持直接作用于 Flex 子项——flex-basis 错误 → 宽度不可控 → overflow: hidden 失效 → 省略号画不出来。
- 绕开方案：给文字包一层
<div>，设 <code>display: block，再在内层加：width: 100%+white-space: nowrap+overflow: hidden+text-overflow: ellipsis - 外层 Flex 子项只负责布局，不参与截断逻辑
- 如果子项是
flex-direction: column且align-items: center，还要加max-width: 100%防止文字溢出容器
真正卡住人的，往往不是某个属性写错，而是忘了高度必须从某一层“锚定”下来——而且这个锚点得是浏览器能测量的真实值，比如 1px、200px 或 100vh，而不是依赖链式继承或百分比推导。
