本文介绍一种利用 css 自定义属性与 calc() 动态计算宽度的方法，解决容器在有/无垂直滚动条时自动调整内容区域宽度的问题，避免固定 padding 导致无滚动条时浪费水平空间。
本文介绍一种利用 css 自定义属性与 calc() 动态计算宽度的方法，解决容器在有/无垂直滚动条时自动调整内容区域宽度的问题，避免固定 padding 导致无滚动条时浪费水平空间。
在响应式与跨浏览器 UI 开发中，一个常见但棘手的需求是：当容器内容溢出触发垂直滚动条时，希望内容与滚动条之间保留一定间距（如 10px）；而当内容未溢出、滚动条不显示时，又希望内容完全撑满容器宽度，不留空白。传统方案（如直接设置 padding-right: 10px）无法智能切换——它始终生效，导致无滚动条时右侧出现不必要的留白。
纯 CSS 实现该行为的关键在于感知滚动条是否存在。遗憾的是，CSS 尚无原生伪类（如 :has-scrollbar)）支持此检测。但可通过巧妙利用滚动条宽度（scrollbar width）与容器尺寸的数学关系，结合 CSS 自定义属性和 calc() 实现近似自适应效果。
核心思路如下：
- 容器设为固定宽高（如 width: 100px; height: 80px），启用 overflow-y: auto；
- 利用滚动条宽度作为“隐式开关”：当滚动条出现时，其占据的宽度（通常为 16px 左右，因浏览器/系统而异）会压缩可用内容宽度；
- 通过 --widthA（容器总宽）、--widthB（期望内容宽，初始设为 100%）及差值 --widthC 模拟滚动条占位，并反向调整 .item 的实际宽度。
以下是优化后的可复用方案：
html {
box-sizing: border-box;
}
*, *::before, *::after {
box-sizing: inherit;
}
.container {
--container-width: 100px;
display: flex;
flex-direction: column;
overflow-y: auto;
height: 80px;
width: var(--container-width);
border: 1px solid #e74c3c;
/* 不再使用 padding-right，交由子元素动态控制 */
}
.item {
/* 动态计算：100% - (容器宽 - 100%) = 200% - 容器宽 */
/* 当无滚动条时，100% 即容器宽，结果为 100%；有滚动条时，100% 被压缩，差值体现为“预留间隙” */
width: calc(100% - (var(--container-width) - 100%));
background-color: #27ae60;
margin-top: 5px;
box-sizing: border-box; /* 确保 padding/border 不影响宽度计算 */
}✅ 优势：无需 JavaScript，纯 CSS 实现；兼容现代浏览器（Chrome 49+、Firefox 42+、Safari 15.4+）。
⚠️ 注意事项：
- 滚动条宽度非标准值（Windows 默认约 17px，macOS 隐藏式滚动条常为 0），本方案依赖 100% 在不同场景下的渲染差异，对 macOS 隐藏滚动条支持有限；
- 若需精确控制间隙（如严格 10px），建议搭配 @supports (selector(:has(*)))（未来可期）或轻量 JS 检测 element.scrollHeight > element.clientHeight 后添加类名；
- 始终启用 box-sizing: border-box，避免内边距/边框干扰宽度计算。
总结而言，虽然 CSS 目前无法直接“检测滚动条”，但通过 calc() 与视口百分比的交互，我们能构建出具备条件感知能力的弹性布局。对于大多数桌面端项目，该方案已足够稳健；若需更高精度或支持深色模式/缩放等复杂场景，可将此 CSS 方案作为兜底，辅以少量 JS 增强。
