本文介绍一种利用 css 自定义属性与 calc() 动态计算宽度的技巧，使容器在有垂直滚动条时自动预留 scrollbar 位置（避免内容紧贴滚动条），而在无滚动条时让内容完全撑满可用宽度，无需 javascript 即可实现响应式间距控制。
本文介绍一种利用 css 自定义属性与 calc() 动态计算宽度的技巧，使容器在有垂直滚动条时自动预留 scrollbar 位置（避免内容紧贴滚动条），而在无滚动条时让内容完全撑满可用宽度，无需 javascript 即可实现响应式间距控制。
在 Web 开发中，一个常见但棘手的布局需求是：当容器出现垂直滚动条时，希望内容与滚动条之间保留一定间距（如 padding-right）；而当内容未溢出、滚动条隐藏时，又希望内容能充分利用全部水平空间，不因预设 padding 而留白。遗憾的是，CSS 并未提供 :has-scrollbar 这类原生伪类（截至 2024 年，:has() 尚不支持 :scrollbar 状态检测），因此无法直接通过伪类切换样式。
上述问题的答案给出了一种基于 calc() 与 CSS 自定义变量的巧妙变通方案——其核心思想是：让子元素宽度动态“减去滚动条宽度”（仅当滚动条存在时生效）。虽然该方法存在一定局限性（如需预估滚动条宽度、不兼容所有浏览器 scrollbar 行为），但在多数现代浏览器中具备实用价值。
以下是优化后的推荐实现（已修正原答案中的逻辑缺陷，并增强健壮性）：
.container {
--scrollbar-width: 16px; /* 常见滚动条宽度，可根据需要调整 */
display: flex;
flex-direction: column;
overflow-y: auto;
height: 80px;
width: 100px;
border: 1px solid red;
}
/* 关键：子项宽度 = 容器宽度 - （滚动条宽度 × 是否溢出） */
.item {
width: calc(100% - var(--scrollbar-width));
background-color: green;
margin-top: 5px;
/* 可选：防止文本换行破坏对齐 */
box-sizing: border-box;
}⚠️ 注意事项与限制说明：
- --scrollbar-width 是一个估算值（Windows 默认约 17px，macOS 隐藏滚动条时为 0，Linux 各发行版差异较大），实际项目中建议结合 @supports (scrollbar-width: thin) 或 JS 检测进行降级处理；
- 该方案依赖于父容器 overflow-y: auto 的渲染行为，若使用 overflow-y: scroll 强制显示滚动条，则始终会减去 --scrollbar-width，失去“按需预留”的意义；
- 更可靠的现代替代方案是等待 :has() + ::-webkit-scrollbar 组合支持（目前仅 Safari 部分支持），或使用轻量 JS 监听 scrollWidth > clientWidth 动态添加 .has-scrollbar 类。
✅ 总结： 在纯 CSS 场景下，此 calc() + 自定义变量方案是一种简洁、零依赖的启发式解法。它虽非 100% 精确，但显著优于硬编码固定 padding，兼顾了可维护性与视觉一致性，适合对滚动条行为容忍度较高的业务组件（如侧边菜单、消息列表等）。
