ie11 中 flex 布局高度异常的根本原因是其未正确实现 align-items: stretch，需父容器设硬高度（如 height: 400px）、避免 height: 100% 等触发拉伸退出、保持 flex-direction: row 以拉伸高度，并用 flex: 1 1 0% 替代 flex: 1 防坍缩。
IE11 中 Flex 布局高度异常，根本不是“偶尔出错”，而是它压根没按标准实现 align-items: stretch —— 即使你写了，它也常静默忽略，最终渲染为 0px 高或内容自适应高。
父容器没设明确高度，stretch 就不启动
Flex 的等高拉伸依赖交叉轴有可计算的尺寸。IE11 不会从 min-height 或 height: auto 推导出拉伸基准，必须给父容器一个“硬高度”：
-
height: 400px、height: 100vh可用，但min-height: 100vh在 IE11 中大概率失效 - 临时调试时加
height: 1px，若立刻等高，说明问题就在这儿 - 嵌套场景下，每一层 Flex 父容器都得有高度约束，不能只靠最外层
子元素写了 height/max-height/align-self，就主动退出拉伸
IE11 对拉伸的退出判定比现代浏览器更敏感：
-
height: 100%不仅无效，还会禁用align-items: stretch（因为它让浏览器认为“高度已由你接管”） -
max-height: 200px、min-height: 0、align-self: flex-start都会让该子项脱离 stretch 队列 - 图片或视频自带
min-height: auto，必须显式覆盖为min-height: 0才能参与拉伸
flex-direction: column 下根本不会等高
很多人误以为垂直布局也能自动等高，但 IE11 里这完全是误解：
-
flex-direction: row→ 交叉轴是垂直方向 →align-items: stretch拉伸高度 -
flex-direction: column→ 交叉轴变成水平方向 →align-items: stretch拉伸的是宽度，不是高度 - 想让多列卡片等高，必须保持
flex-direction: row，并确保父容器有足够高度
IE11 的 flex: 1 会把 flex-basis 解析成 0px
这是最隐蔽的高度坍缩源头：flex: 1 在 IE11 中被展开为 flex: 1 1 0px，而非标准的 flex: 1 1 auto。0px 让子项失去宽度/高度起点，导致：
- 换行失效（
flex-wrap: wrap完全不触发） - 文字省略不生效（
text-overflow: ellipsis失败） - 子项塌成一条线（尤其在
flex-direction: column下） - 正确写法是
flex: 1 1 0%+-ms-flex: 1 1 0%，且必须带百分号单位
真正麻烦的不是写多少前缀，而是 IE11 对 align-content、flex-wrap: wrap-reverse、flex-basis: content 这些属性完全不识别——它不报错，只是安静地当它们不存在。调试时务必打开 IE11 DevTools，直接看「Computed」面板里的 flex-basis 和 height 实际值，别信样式面板里的声明是否划掉。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
