必须显式给flex子项设box-sizing: border-box并配合min-width: 0、用gap替代margin、检查computed面板确认生效，根本原因是默认box-sizing: content-box导致padding和border额外叠加溢出。
Flex子项加padding后总宽度超父容器，怎么 fix？
根本原因是box-sizing: content-box——Flex容器按这个默认模式计算子项“基础尺寸”，padding和border被额外叠加，不参与分配逻辑。比如一个flex: 1子项设了width: 50%和padding: 12px，浏览器先分50%给内容区，再往里加24px，必然溢出。
必须显式给子项设box-sizing: border-box，不能只靠全局重置——第三方UI库（如Ant Design）的组件样式可能覆盖它；DevTools「Computed」里确认值确实是border-box才算生效。
- 对关键子项单独写：
.flex-item { box-sizing: border-box; padding: 16px; } - 若用了
flex: 1或flex-basis，同步加min-width: 0（否则旧Chrome/IE下不收缩） -
gap替代margin：给容器加gap: 12px，间隙不参与尺寸计算；margin不管用box-sizing，照样多占空间
加了box-sizing: border-box还溢出，该查什么？
不是盒模型问题，而是布局逻辑或渲染干扰：
- 父容器用了
width: 100vw+padding：视口宽+内边距必超，改用width: 100%并确保父容器有明确content width - 子元素含未约束的替换元素：
img没设max-width: 100%，或white-space: nowrap导致长单词撑开 - 第三方样式覆盖：Bootstrap等库可能重置了
box-sizing但漏掉::before/::after，检查Computed面板
Flex子项被压扁或文字溢出，min-width怎么设才有效？
min-width是唯一能对抗flex-shrink的物理屏障，但它行为反直觉：
-
min-width: 0常用于允许真正收缩（比如侧边栏折叠时的导航项），而非防压缩 - 含文本的子项要配合
white-space: nowrap+overflow: hidden+text-overflow: ellipsis才生效 - 避免用百分比值（如
min-width: 20%），Flex下父宽动态变化，结果不可控 -
min-width: fit-content适合卡片/标签类组件，但IE完全不支持，Firefox兼容性不稳定
为什么overflow在Flex子项上不起作用？
overflow只在块级格式化上下文（BFC）中生效，而Flex子项默认不是BFC；且它只裁剪内容，不改变子项在主轴上的占用宽度。
- 让
overflow: hidden起效的关键是限制主轴尺寸：flex: 1+min-width: 0+overflow: hidden - 想让整个容器横向滚动，
overflow-x: auto必须设在Flex容器上，不是子项上 - iOS Safari默认禁止手动拖拽横向滚动，需加
-webkit-overflow-scrolling: touch或overscroll-behavior-x: contain
box-sizing: border-box不等于它真生效，优先看那里。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
