ie11中flex-basis与padding组合导致子项宽度失控，因其将padding计入flex-basis计算起点；box-sizing:border-box无效，须显式设置-ms-flex-preferred-size与width一致并预先扣除padding值。
IE11里flex-basis + padding组合为什么会让子项宽度失控
因为IE11在flex上下文中对box-sizing的解析有偏差：它把padding算进flex-basis的计算起点，而不是像标准浏览器那样先按flex-basis定基础尺寸、再加padding。结果就是——你写flex-basis: 200px，加上padding: 10px，IE11实际分配的主轴空间是200px + 20px = 220px，直接撑破容器或导致换行错乱。
用box-sizing: border-box能修吗？不能，但必须配-ms-flex-preferred-size
box-sizing: border-box本身在IE11中对flex子项**无效**——它只影响常规块级盒模型，不改变flex引擎内部的尺寸推导逻辑。真正起作用的是显式声明-ms-flex-preferred-size（即IE版flex-basis），并确保它和width一致：
- 必须同时写
width: 200px和-ms-flex-preferred-size: 200px，IE11才会把200px当作基准 -
padding仍会额外叠加，所以如果需要内边距，得从flex-basis里提前“扣掉”：比如目标净宽200px + 左右各10px padding，就设flex-basis: 180px、width: 180px、-ms-flex-preferred-size: 180px - 别依赖
flex: 0 0 200px简写，IE11对三值语法解析不稳定，拆成独立属性更可靠
为什么padding不能替代gap，哪怕加了box-sizing
gap是布局级间距，不参与子项尺寸计算；而padding是子项自身内边距，在IE11中会被flex引擎误读为“要分配的空间”。即使加了box-sizing: border-box，它也只控制子项内容区渲染，不阻止IE把padding纳入flex-basis推导链。现象包括：
- 动态增删子项时，padding导致剩余空间重新分配异常
- 缩放页面后，padding像素值不变，但flex-basis百分比基准偏移，错位放大
- 子项含文字时，IE11可能因padding挤占导致
text-overflow: ellipsis失效
真正能落地的写法：固定flex-basis + min-width: 0 + overflow: hidden
当子项含不确定长度内容（如长文本、图片）时，仅靠box-sizing和padding无法兜底。必须切断内容对flex尺寸的反向影响：
- 所有弹性子项加
min-width: 0（IE11下min-width默认是auto，会锁死最小宽度） - 加
overflow: hidden防文字溢出，配合text-overflow: ellipsis才有效 -
flex-basis必须是具体值（200px或0%），禁用auto或max-content（IE11不支持） - 若需响应式，用媒体查询重置
flex-basis，别依赖calc()——IE11对calc()在flex-basis中的支持极差
box-sizing，而是让flex-basis的值足够干净、足够明确——任何模糊性（auto、百分比、calc、未声明-ms前缀）都会被它放大成布局灾难。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
