scrollbar-gutter是否支持水平滚动条？布局异常问题咨询

使用CSS的scrollbar-gutter属性预留滚动条空间避免布局偏移时，垂直滚动场景表现正常，但针对水平滚动条设置时出现异常：明明设置了overflow-x: auto和overflow-y: hidden，预留的空间却是垂直方向的，而非水平方向，即使垂直滚动已被禁用。

预期行为：容器应为水平滚动条预留空间，防止其出现时发生布局偏移。
实际行为：预留空间为垂直方向，与设置的滚动方向不符。

代码示例 #

CSS代码 #

* {
 margin: 0;
}
.scroll-container {
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable;
  border: 1px solid black;
}

.scroll-content:hover {
  width: 1000px;
}

.scroll-content {
  background: orange;
}

HTML代码 #

<div class="scroll-container">
  <div class="scroll-content">
    <p>Content</p>
    <p>Content</p>
    <p>Content</p>
  </div>
</div>

scrollbar-gutter默认针对**垂直方向（块级轴）**的滚动条预留空间，这是因为默认书写模式下，块级轴为垂直方向。要让它为水平滚动条预留空间，需要明确指定方向：

修改.scroll-container的CSS属性，将scrollbar-gutter: stable改为scrollbar-gutter: stable horizontal：

.scroll-container {
  width: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-gutter: stable horizontal; /* 明确指定为水平滚动条预留空间 */
  border: 1px solid black;
}

这样设置后，容器会在底部预留水平滚动条的空间，当鼠标悬停触发内容宽度扩展时，布局不会发生偏移。

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