overflow-x: hidden在嵌套中不生效，90%因最外层容器缺width/max-width导致无裁剪边界；需逐层设max-width: 100%、min-width: 0，并确保溢出源直接父容器显式设置overflow-x。
overflow-x: hidden 为什么在嵌套里不生效
加了 overflow-x: hidden 却还是横向滚动，90% 是因为最外层容器没设 width 或 max-width。浏览器根本不知道“边界在哪”，overflow 就成了摆设。
常见错误现象：
- 父容器用
width: 100%，但它的父级没约束宽度（比如body没设max-width） - 嵌套中某一级是
display: flex，子项含图片或长 URL，却没设min-width: 0 - 用了
white-space: nowrap但漏了text-overflow: ellipsis或overflow: hidden
实操建议：
- 从最外层开始检查：给根容器（如
.card、.list-item）加max-width: 100%或具体值（如max-width: 480px） - 所有可能撑宽的嵌套层级（尤其是含
img、input、span的直接子元素）都加min-width: 0 - 避免对 flex 容器本身写
width: 100%，改用flex: 0 1 auto或flex: 1
flex 嵌套中文字/图片撑破容器的根源
不是 flex 不够弹性，而是浏览器默认给可替换元素（img）、表单控件、行内文本块加了 min-width: auto —— 它会按最长不可折行内容（比如一串无空格 URL）锁定最小宽度，死活不缩。
立即学习“前端免费学习笔记（深入）”；
关键点：
-
min-width: 0必须加在「直接包裹内容」的元素上，例如.item > span、.header > img，不是只加在.item上 - 旧版 Safari 对
min-width: 0支持弱，别写成min-width: 0px或min-width: 0% - 如果内层又是
display: flex（如头像+标题+操作按钮），那标题文字所在元素（如.title）也得单独加min-width: 0
漏掉任意一层，溢出就回来。
响应式卡片/列表中 width: 100% 和 max-width: 100% 的区别
width: 100% 是“我必须占满父容器”，而 max-width: 100% 是“我最多只能占满，但可以更小”。后者才是响应式安全的选择。
典型问题场景：
- 移动端横屏时，
width: 100%+ 父容器有padding→ 实际宽度超视口 → 横向滚动条 - 浏览器缩放 125%，
width: 100%让内容被拉稀，max-width: 100%能守住上限 - iframe 嵌入页面时，
width: 100%可能继承 iframe 宽度而非当前容器
推荐组合：
-
width: 100%+max-width: 100%（双重保险） - 配合
box-sizing: border-box，确保padding和border不额外加宽 - 对图片统一加
max-width: 100%+height: auto，防止原始尺寸破坏布局
移动端双指缩放导致 overflow 失效怎么办
iOS Safari 下，即使写了 overflow: hidden，用户双指拉伸仍可能触发横向滚动 —— 这不是 CSS 失效，是浏览器把整个页面当成了可缩放区域。
不要直接加 user-scalable=no，它损害可访问性且 iOS 15+ 后支持不稳定。
真正有效的做法：
- 确保
body和根容器没有隐式宽于视口：重置margin、padding，清除浮动残留 - 把
overflow: hidden加在具体业务容器（如.card-wrapper）上，而不是body或html - 用临时样式快速定位溢出源：
* { outline: 1px solid red !important; }扫描哪一层实际超宽
多层嵌套的响应式溢出，本质是尺寸控制权层层丢失。守住每一层的 max-width 和 min-width: 0，比堆砌 overflow 更治本。
