只写 overflow-x: hidden 不够，因父容器缺 height/max-height 会导致 overflow-y: auto 失效；必须显式设高度约束，否则浏览器无法判定纵向溢出，且需防 position: absolute 等脱离文档流元素干扰。
直接设置 overflow-x: hidden 和 overflow-y: auto 即可，但必须确保容器有明确高度约束，否则 overflow-y: auto 可能不触发纵向滚动。
为什么只写 overflow-x: hidden 不够
很多人加了 overflow-x: hidden 后发现纵向滚动条也没了，或者根本滚不动——根本原因是父容器没设 height 或 max-height，导致浏览器无法判断“内容是否溢出纵向”，于是把 overflow-y: auto 当作 visible 处理。
- 必须显式给容器设
height、max-height或通过 flex/grid 布局提供纵向约束 - 避免仅用
min-height，它不参与溢出判定 - 检查子元素是否用了
position: absolute或transform，它们可能脱离文档流，让溢出检测失效
overflow-x: hidden 在不同场景下的行为差异
这个属性不是“隐藏滚动条”，而是“禁止横向溢出”，所以它的效果取决于内容本身是否真会横向溢出：
- 对普通文本流（如
<p></p>、<div> 默认块级）：自动换行，一般不会触发横向滚动，<code>overflow-x: hidden几乎无感 - 对强制不换行内容（如
white-space: nowrap、display: inline-block宽度过大、浮动元素超出）：会裁剪掉右侧溢出部分，且不显示横向滚动条 - 对 flex 容器内子项：若未设
flex-shrink: 0或内容过宽，仍可能触发横向溢出，此时overflow-x: hidden才起作用 - 加
overscroll-behavior-x: contain防止滚动穿透和 bounce 效应 - 避免在
body或html上直接设overflow-x: hidden，改用包裹层（如<div class="viewport">）更可控 <li>如果内容含 iframe 或第三方 widget，它们可能自带横向滚动，需单独对其容器加样式</li> <p>最易被忽略的是：当容器同时有横向和纵向内容溢出时，<code>overflow-x: hidden会静默裁剪，但开发者工具里看不出警告——得靠肉眼观察右侧内容是否被截断，或用getBoundingClientRect()检查子元素实际位置。
移动端 Safari 的兼容性坑
iOS Safari（尤其是 iOS 16+）对 overflow-x: hidden 的裁剪行为有时不可靠，尤其在页面缩放或 orientation change 后，可能出现短暂横向滚动或右侧内容闪现：
