如何通过CSS容器查询实现滚动条可见时调整子元素边距？

原方案可行性分析 #

不可行。使用容器查询的size类型时，容器必须具备明确的尺寸约束（比如固定高度、最大高度等），但你希望container的高度由子元素自动撑开（即height: auto），这种情况下容器没有确定的可用空间范围，无法触发容器查询，因此无法通过@container (min-height: 301px)来检测滚动条是否出现。

CSS解决方案 #

目前CSS没有原生属性直接检测滚动条可见状态，但可以通过以下几种方法实现需求：

方法1：scrollbar-gutter（推荐，简单高效）

如果你的核心需求是避免子元素内容被滚动条遮挡，而非严格“仅滚动条可见时才加边距”，可以使用标准属性scrollbar-gutter: stable，它会在容器中预留出滚动条的固定空间，无论滚动条是否存在，内容都不会被遮挡：

.parent {
  height: 300px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

该属性支持现代主流浏览器，无需额外调整HTML结构。

方法2：:has()选择器+辅助元素（严格满足滚动条可见时加边距）

如果必须严格在滚动条可见时才添加右边距，可通过辅助元素结合:has()选择器实现：

1. 调整HTML结构，在parent内添加一个等高的参考元素：

<div class="parent">
  <div class="height-reference"></div>
  <div class="container">
    <div class="children">...</div>
  </div>
</div>

2. 编写CSS：

.parent {
  height: 300px;
  overflow-y: auto;
  position: relative;
}

/* 参考元素：与parent等高，不占用视觉空间 */
.height-reference {
  height: 100%;
  visibility: hidden;
  pointer-events: none;
}

/* 让container根据子元素高度自适应，且覆盖整个parent */
.container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}

/* 当container高度超过参考元素时（即内容溢出，滚动条可见），给children加右边距 */
.parent:has(.container:not(:height(100%))) .children {
  margin-right: 25px;
}

注意：:height()比较函数和:has()选择器需要Chrome 112+、Firefox 121+、Safari 15.4+以上版本支持。

方法3：滚动条伪元素检测（兼容性一般）

针对不同浏览器的私有滚动条伪元素，结合:has()选择器判断滚动条是否存在：

/* Chrome/Edge/WebKit 内核浏览器 */
.parent:has(::-webkit-scrollbar) .children {
  margin-right: 25px;
}

/* Firefox 浏览器 */
.parent:has([scrollbar-width="auto"]) .children,
.parent:has([scrollbar-width="thin"]) .children {
  margin-right: 25px;
}

该方法无需调整HTML结构，但依赖浏览器私有属性，兼容性略差。

内容的提问来源于stack exchange，提问作者Enrypase