overflow-x和overflow-y是分别控制水平与垂直溢出的必要CSS属性，必须显式设置以避免浏览器隐式修正导致滚动失效；如横向内容不可预测时需用overflow-x:auto配合overflow-y:hidden，固定高度容器推荐overflow-y:auto实现按需滚动。
overflow-x 和 overflow-y 不是“可选技巧”，而是解决具体溢出问题的必要开关——用错方向或漏设一个，滚动就失效、内容就被裁掉、甚至整个区域变空白。
什么时候必须用 overflow-x: auto？
横向内容不可预测宽度时，比如表格列数动态生成、代码块含长行、响应式卡片流超出容器宽度。只设 overflow: auto 不够：它在某些浏览器（如旧版 Safari）里会因垂直方向未溢出而抑制水平滚动条出现。
- 必须显式写
overflow-x: auto，同时补上overflow-y: hidden或auto，避免浏览器按默认规则把 y 方向变成visible后又退化为auto导致意外滚动 - 注意
white-space: nowrap要配合使用，否则换行会掩盖溢出行为 - 移动端需测试手势是否能触发横向滑动；iOS Safari 对
overflow-x的支持比桌面弱，有时需加-webkit-overflow-scrolling: touch
为什么 overflow-y: auto 是侧边栏/弹窗的标配？
固定高度容器（如 height: 300px）里放不确定长度的内容（用户评论、日志列表），不设 overflow-y 就会撑开父容器或覆盖下方元素。
-
overflow-y: auto是最安全选择：没溢出时不显示滚动条，不占空间；溢出时才启用，视觉干净 - 别用
scroll：它强制显示滚动条轨道，尤其在窄容器里会挤占可用宽度，还可能触发不必要的重排 - 若同时禁止横向滚动，一定要加
overflow-x: hidden—— 否则长单词或内联代码可能触发水平溢出，导致双滚动条打架
overflow-x 和 overflow-y 组合时最容易踩的坑
浏览器对两个方向不同取值的组合有隐式修正逻辑，不是简单“各自生效”。
立即学习“前端免费学习笔记（深入）”；
- 如果只写
overflow-x: scroll，overflow-y未声明，部分浏览器（如 Chrome 旧版本）会把 y 方向设为hidden，而不是你期望的visible -
overflow-x: visible和overflow-y: auto共存时，visible在多数现代浏览器中会被强制转为auto，防止内容完全不可访问 —— 这意味着你可能意外获得一个横向滚动条 - 嵌套滚动容器要小心：父级设了
overflow: hidden，子级的overflow-y: auto就会失效，因为内容被父级直接裁掉了
真正麻烦的从来不是“要不要加滚动条”，而是“哪个方向该响应、哪个方向该截断、以及浏览器会不会偷偷改你的设定”。写的时候多看一眼 devtools 里的 computed 样式，比猜兼容性更可靠。
