子元素超出父容器的根本原因是尺寸计算逻辑未被正确约束，需显式设置box-sizing: border-box于子元素、min-width: 0以解除flex收缩限制、position: relative创建定位上下文，并对替换元素加max-width: 100%等针对性处理。
子元素超出父容器，不是“要不要裁剪”的问题，而是“尺寸计算逻辑是否被正确约束”的问题。核心矛盾往往出在 box-sizing、min-width、定位上下文或内容固有尺寸上，而不是简单加 overflow: hidden 就能解决。
box-sizing: border-box 必须作用于子元素本身
父容器设了 width: 300px，子元素却撑到 344px，大概率是因为子元素用了 padding: 20px 和 border: 2px，而默认 box-sizing: content-box 把这些加在 width 外面。
-
box-sizing: border-box必须显式写在子元素上，或用全局重置：* { box-sizing: border-box; }或更完整地：*, *::before, *::after { box-sizing: border-box; } - 只给父容器设
box-sizing对子元素完全无效 - 对
img、svg、iframe等替换元素，box-sizing不起作用，必须额外加max-width: 100%和height: auto
flex 子项不收缩？先看 min-width: 0
写了 flex-shrink: 1 却没效果，是因为 flex 子项默认 min-width: auto（对 flex-direction: row）或 min-height: auto（对 column），它会把内容的最小固有宽度当底线，死守不放。
- 必须对需要收缩的子元素显式写
min-width: 0（水平布局）或min-height: 0（垂直布局） - 这个值只对直接子元素生效；嵌套 flex 容器里的孙子项也要单独加
- 搭配
word-break: break-word或overflow-wrap: break-word才能处理长 URL 或无空格英文 - Firefox 对
min-width: auto执行更严格，别依赖 Chrome 的“悄悄妥协”
position: absolute 子元素溢出，缺的是定位上下文
子元素用了 position: absolute，但跑到了父容器外面，根本原因不是它“太宽”，而是它压根没把父容器当参考系——因为父容器没设 position: relative，它回退到了 body 或视口定位。
- 父容器必须加
position: relative（或其他非static值），才能创建新的定位上下文 - 子元素要配合
top/left/right/bottom+width: 100%或具体值，否则即使有定位上下文也容易错位 - 不要用
overflow: hidden“掩盖”这个问题，它会同时裁掉 tooltip、下拉菜单等正当溢出内容 - 如果父容器本身是 grid 项，也要确保它有
position: relative，否则绝对定位的图片仍会撑大轨道
overflow-x: auto 不生效？检查容器是否真被“框住”
加了 overflow-x: auto 却没滚动条，通常是因为父容器宽度没被限制住，内容一撑就拉宽，根本不存在“溢出”。
- 父容器必须有明确宽度约束：
width、max-width或稳定的flex-basis - 子元素不能被 flex 自动压缩（否则没空间可溢出），需设
flex-shrink: 0或flex: 0 0 auto - 子元素内文本需
white-space: nowrap，否则提前换行，滚动需求消失 -
overflow: auto可能误触垂直滚动，优先用overflow-x: auto
最容易被忽略的，是花时间调 z-index 或 overflow，却不打开开发者工具看一眼 “Containing block” 是谁——右键检查元素，在 Styles 面板里找这行字，比猜十次都准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
