本文详解如何在 CSS 中精准控制容器的滚动行为：使元素仅在垂直方向（Y 轴）支持滚动，同时严格禁止水平方向（X 轴）溢出与滚动，避免因子元素宽度、滚动条侵占或 overflow 组合误用导致的布局异常。
本文详解如何在 css 中精准控制容器的滚动行为：使元素仅在垂直方向（y 轴）支持滚动，同时严格禁止水平方向（x 轴）溢出与滚动，避免因子元素宽度、滚动条侵占或 `overflow` 组合误用导致的布局异常。
在构建侧边导航栏、工具面板或紧凑型垂直列表时，常需「内容可垂直滚动，但绝对不可横向溢出」——即：Y 轴启用滚动条，X 轴保持 visible 语义（不裁剪、不滚动、不触发横向滚动条）。但直接设置 overflow-y: auto; overflow-x: visible 并不能如预期工作，原因在于：
- CSS 规范限制：当 overflow-x 为 visible 时，若 overflow-y 为 auto 或 scroll，浏览器会强制将 overflow-x 重置为 auto（详见 CSS Overflow Module Level 3），以避免渲染歧义。因此 overflow-x: visible 实际无效。
- 根本矛盾点：visible 本身意味着“不创建新的块格式化上下文且不裁剪”，而滚动容器必须建立 BFC 并裁剪内容——二者逻辑冲突。
✅ 正确解法是放弃 overflow-x: visible，转而通过布局约束确保 X 轴天然不溢出：
1. 严格控制子元素宽度
.nav-block 设置 width: 100% 会撑满父容器（#side-navbar），但若父容器存在 padding、border 或滚动条宽度（尤其在 Windows/Linux 下默认约 17px），子元素实际渲染宽度可能轻微超限，触发隐式横向滚动。应主动预留安全边距：
#side-navbar {
position: absolute;
background-color: #2b3035;
height: 100%;
width: 5%; /* 固定窄宽 */
overflow-y: auto; /* ✅ 允许垂直滚动 */
overflow-x: hidden; /* ❌ 禁用横向滚动（非 visible！）*/
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
/* 关键修复：子项宽度留白，避开滚动条侵占 */
.nav-block {
height: 10%;
width: 92%; /* ← 不再用 100%，留出滚动条空间 */
margin: 0 auto; /* 水平居中，避免左侧偏移 */
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
transition: all ease 0.2s;
}2. 消除滚动条对布局的影响
即使隐藏了滚动条，其占位空间仍可能存在。推荐使用 scrollbar-gutter（现代浏览器）或 padding-right 补偿：
#side-navbar {
/* 方案 A：现代标准（Chrome 114+ / Firefox 119+） */
scrollbar-gutter: stable both-edges;
/* 方案 B：兼容方案（所有浏览器） */
padding-right: 12px; /* 预留滚动条宽度 */
}3. 完整可运行示例
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
background-color: #212529;
height: 100vh;
overflow: hidden; /* 防止页面级滚动干扰 */
}
#side-navbar {
position: absolute;
top: 0; left: 0;
background-color: #2b3035;
height: 100%;
width: 5%;
overflow-y: auto;
overflow-x: hidden; /* 必须设为 hidden 或 clip */
scrollbar-width: none;
-ms-overflow-style: none;
padding-right: 12px;
}
#side-navbar::-webkit-scrollbar { display: none; }
.nav-block {
height: 60px; /* 使用固定高度更可控 */
width: 94%;
margin: 12px auto; /* 垂直间距用 margin，非 % */
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
transition: background-color 0.2s ease;
}
.nav-block:hover {
background-color: rgba(255, 255, 255, 0.3);
}
</style>
</head>
<body>
<div id="side-navbar">
<!-- 18 个 nav-block -->
<div class="nav-block"></div><div class="nav-block"></div>
<!-- ...（省略其余） -->
</div>
</body>
</html>⚠️ 关键注意事项：
- 永远不要依赖 overflow-x: visible 与 overflow-y: auto 同时存在——它在规范中被定义为未定义行为，各浏览器处理不一致；
- 使用 width: 100% 的子元素时，务必检查父容器是否含 border/padding/scrollbar，优先用 box-sizing: border-box；
- 若需完全隐藏滚动条但仍保留滚动能力，-webkit-scrollbar { display: none } + overflow-y: scroll 是最可靠组合；
- 在移动端，建议添加 touch-action: pan-y 防止误触发横向拖拽。
通过约束宽度、消除滚动条干扰、正确声明 overflow，即可稳定实现「仅 Y 轴滚动，X 轴零溢出」的专业级侧边导航效果。
