overflow:hidden失效的根本原因是溢出裁剪依赖bfc和包含块约束，而absolute定位、无明确宽高、transform图层合成、flex子项min-width:auto等会使子元素脱离裁剪上下文；需配合position:relative、width约束、min-width:0、white-space:nowrap等才能生效。
直接给容器加 max-width: 100% 并不能阻止溢出——真正起作用的是宽度约束链是否完整，以及子元素是否脱离文档流。
为什么 overflow: hidden 经常失效
常见现象：明明父容器写了 overflow: hidden，但里面一个 position: absolute 的按钮还是伸到屏幕外，横向滚动条依然出现。
根本原因不是 CSS 写错了，而是这些情况让 overflow 失去裁剪能力：
-
position: absolute或fixed元素完全脱离文档流，不参与父容器的尺寸计算，也不受其overflow约束 - 父容器没设明确宽度（比如只写
max-width: 100%却没配width: 100%或inline-size: 100%） - 子元素用了
transform: translateX(100px)或scale(1.2)，触发了图层合成，绕过溢出裁剪逻辑 - Flex/Grid 子项未设
min-width: 0，内部长文本或图片会撑开整个容器
max-width 必须搭配什么才真正生效
max-width 本身只是“上限”，它不自动居中、不强制收缩、也不影响子项行为。要让它实际起效，得补上这几条：
- 块级容器必须有明确的参与布局的宽度，推荐写
width: 100%或inline-size: 100% - 配合
margin: 0 auto实现水平居中（注意别写margin: auto，否则上下边距也会变成 auto） - 对图片、视频等媒体元素单独加
max-width: 100%和height: auto，否则原始尺寸会突破父容器 - 如果父容器是 Flex/Grid，子项要尊重
max-width，就得显式设flex-shrink: 1和flex-basis: auto，或者加min-width: 0
处理嵌套内容或第三方组件的溢出
表格、代码块、iframe 这类“硬宽度”内容最容易破框，靠一层 max-width 挡不住。
- 给外层容器加
overflow-x: auto，允许横向滚动但不破坏整体布局 - 为
iframe或table包一层div，并设该层width: 100%+overflow: hidden - 对长文本用
text-overflow: ellipsis，但必须同时配white-space: nowrap和overflow: hidden - 用
object-fit: contain控制img或video，避免拉伸变形的同时防止溢出
最易被忽略的点：溢出往往不是单个属性的问题，而是宽度约束在父子层级间断掉了——检查每一层是否都设置了 width、max-width、min-width: 0，尤其当用了 Flex/Grid 时，子项默认不收缩，这点和传统块级流完全不同。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
