IE11中Flex子项塌陷的根源是flex-basis被强制设为0而非auto，导致内容无法作为尺寸基准；必须显式设置-ms-flex-preferred-size: 0（或flex-basis: 0）并配合flex-grow: 1，同时确保父容器有交叉轴约束（如height: 1px），才能避免塌陷。
IE11里Flex子项塌陷，根本不是“不支持flex”，而是它把flex-basis当成了强制尺寸起点——没显式设，就按内容宽度算，再叠上margin或flex-shrink: 0，高度/宽度直接失控。
flex: 1 在IE11里等于 flex: 1 1 0，不是你想象的“自动填满”
标准浏览器中flex: 1等价于flex: 1 1 auto，但IE11只认-ms-flex: 1，且内部默认flex-basis为0（不是auto）。这意味着：子项内容再少，也会被强行压缩到0基础宽度/高度，再靠flex-grow撑开；但如果父容器没给明确交叉轴尺寸（比如height），它就塌成一条线。
-
flex: 1→ IE11直接忽略，必须写-ms-flex: 1 -
flex: 1 1 auto→ IE11部分版本会失效，尤其含百分比或auto时 - 最稳写法：
-ms-flex: 1 1 0%或-ms-flex: 1 1 0px（推荐0%，防压缩工具误删单位）
min-height在Flex容器内失效，本质是flex-basis没锚点
IE11对min-height的处理极度依赖父级是否提供“可测量的交叉轴约束”。如果Flex容器是flex-direction: column，又没设height或min-height，子项的min-height就形同虚设——它连计算基准都没有。
- 修复关键：给Flex容器加
height: 1px或min-height: 1px（哪怕1像素，也能触发IE的stretch逻辑） - 子项别写
height或max-height，否则align-items: stretch直接失效 - 若子项需自适应高度，用
flex-shrink: 0+min-height组合，而非仅靠min-height
el-step、文字省略等场景塌陷，根因是flex-basis未归零
像el-step这类组件，内部节点常带文字+图标，IE11会先按文字宽度定flex-basis，再套flex: 1，结果文字撑不开、图标错位、高度塌缩。同理，文字省略（text-overflow: ellipsis）在Flex里失效，也是因为父项flex-basis没锁死，浏览器优先按内容伸展而非截断。
- 通用解法：所有参与弹性分配的子项，显式设
flex-basis: 0（对应IE的-ms-flex-preferred-size: 0） - 配合
flex-grow: 1，让空间重新均分，内容不再主导尺寸 - 文字省略场景额外加
width: 0（IE下更可靠），再配flex: 1
真正麻烦的不是写多少前缀，而是IE11把flex-basis当作不可绕过的计算起点——漏掉它，后面所有flex-grow、align-items、min-height都可能白搭。每次调完发现还塌，先盯住flex-basis有没有被悄悄忽略。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
