本文详解如何让一个容器仅在垂直方向可滚动，同时确保水平方向内容不溢出、不出现横向滚动条，关键在于控制子元素宽度与父容器溢出属性的协同设置。
本文详解如何让一个容器仅在垂直方向可滚动，同时确保水平方向内容不溢出、不出现横向滚动条，关键在于控制子元素宽度与父容器溢出属性的协同设置。
在实际前端开发中，常需构建类似侧边导航栏（如垂直图标菜单）的 UI：容器高度占满视口，内部多个区块垂直排列，仅允许用户上下滚动查看全部项，但绝对不允许横向滚动或显示X轴滚动条。看似只需设置 overflow-y: auto 和 overflow-x: hidden，但实践中常因子元素尺寸失控导致意外溢出——正如示例中 .nav-block 设置 width: 100% 后，受滚动条宽度侵占、盒模型计算偏差等因素影响，仍可能触发水平溢出。
✅ 正确实现方案
核心原则是：确保所有子元素的总占用宽度严格小于父容器可用宽度，并显式禁用X轴滚动：
#side-navbar {
position: absolute;
background-color: #2b3035;
height: 100vh; /* 推荐使用 vh 而非 %，避免继承问题 */
width: 5%;
overflow-y: auto; /* 启用垂直滚动 */
overflow-x: hidden; /* 关键：强制隐藏X轴溢出（不是 visible！）*/
scrollbar-width: none; /* Firefox 隐藏滚动条 */
}
#side-navbar::-webkit-scrollbar {
display: none; /* Chrome/Safari 隐藏滚动条 */
}
.nav-block {
height: 10%;
width: 80%; /* ⚠️ 关键修正：不能设为 100%，需预留滚动条空间 */
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
margin: 12% auto; /* 使用 auto 水平居中，避免右侧溢出 */
transition: all 0.2s ease;
}
? 为什么 overflow-x: visible 是错误的？
CSS 规范明确规定：当 overflow-x 或 overflow-y 中任一值为 visible 时，另一轴的 auto/scroll 行为将被重置为 visible（即失去滚动能力）。因此必须将 overflow-x 设为 hidden、clip 或 scroll（不推荐），才能保留 overflow-y: auto 的滚动效果。
? 进阶优化建议
- 滚动条空间预留：若需精确控制，可为 .nav-block 设置 max-width: calc(100% - 12px)（12px ≈ 常见滚动条宽度），兼顾兼容性；
- 响应式安全：在小屏设备上，考虑添加 min-width: 40px 防止宽度塌缩；
- 无障碍支持：隐藏滚动条后，确保仍可通过键盘 ↑/↓ 或触控板自然滚动，无需额外 JS。
通过以上配置，容器将稳定表现为：Y轴内容超长时自动出现（或隐藏）滚动条供浏览，X轴内容始终被裁剪且无滚动行为——完美满足“单轴滚动、单轴可见”的设计目标。
