通过 CSS 自定义属性与 calc() 动态计算元素宽度，可在存在垂直滚动条时为内容预留右侧间距，而在无滚动条时让内容自动撑满容器全宽，无需 JavaScript 即可实现响应式布局适配。
通过 css 自定义属性与 `calc()` 动态计算元素宽度，可在存在垂直滚动条时为内容预留右侧间距，而在无滚动条时让内容自动撑满容器全宽，无需 javascript 即可实现响应式布局适配。
在 Web 开发中，一个常见但棘手的布局需求是：当容器因内容溢出而显示垂直滚动条时，希望内容与滚动条之间保留一定间距（如 padding-right）；但当内容未溢出、滚动条消失时，该间距应自动移除，使内容充分利用全部水平空间。遗憾的是，CSS 并未提供直接检测滚动条状态的伪类（如 :has-scrollbar)），也无法通过媒体查询判断滚动条是否存在。因此需借助巧妙的尺寸计算策略绕过这一限制。
核心思路是：利用滚动条宽度作为“隐式信号”——仅当滚动条出现时，容器的可用内容宽度才实际减少；我们可通过 calc() 从容器总宽中动态减去滚动条宽度，从而让子元素“感知”并适配这一变化。
以下是一个稳健可行的纯 CSS 方案：
.container {
--container-width: 100px;
display: flex;
flex-direction: column;
overflow-y: auto;
height: 80px;
width: var(--container-width);
border: 1px solid red;
}
.item {
/* 关键计算：width = 容器宽 - 滚动条宽度（约 16px） */
/* 注意：滚动条宽度因系统/浏览器而异，此处以 16px 为典型值 */
width: calc(var(--container-width) - 16px);
background-color: green;
margin-top: 5px;
}
⚠️ 注意事项与优化建议：
- 滚动条宽度非标准值：Windows 默认约 17px，macOS（隐藏式）滚动条在 hover 前不可见且宽度为 0，Linux 可变。若需更高精度，可结合 @supports (scrollbar-width: thin) 或 JS 动态注入变量，但会牺牲纯 CSS 简洁性。
-
更健壮的写法（推荐）：使用 margin-right 替代 width 计算，避免影响盒模型逻辑：
.item { width: 100%; margin-right: 16px; /* 仅当滚动条存在时生效，但需配合父容器 overflow */ }并配合 container { padding-right: 16px; } —— 此时需接受“无滚动条时多出空白”，除非用 JS 检测后切换 class。
- 现代替代方案（CSS Scrollbar Styling）：若项目支持较新浏览器，可自定义滚动条样式（如 ::-webkit-scrollbar 设为透明窄条），再统一应用 padding-right，视觉上更可控。
综上，虽然纯 CSS 无法直接“条件化”应用 padding，但通过 calc() + 预估滚动条宽度的组合，已能在绝大多数场景下优雅达成目标：滚动条存在时留白，消失时自动填满——兼顾兼容性与语义清晰性，是现代 CSS 布局中值得掌握的进阶技巧。
