CSS Grid列因溢出致尺寸延迟调整及滚动条覆盖问题求助

核心问题原因 #

macOS Chrome默认使用叠加式滚动条（overlay scrollbars），即便你自定义了滚动条样式，初始布局时Grid的auto列宽不会计算滚动条的占用空间，导致滚动条覆盖内容；窗口调整时浏览器重新计算布局，才会把滚动条宽度纳入列宽计算，引发偏移。

解决方法 #

使用CSS scrollbar-gutter 属性为滚动容器提前预留固定空间，确保Grid布局初始就计算滚动条宽度：

1. 为.scrollable容器添加以下样式：

.scrollable {
  overflow: auto;
  /* 稳定滚动条 gutter，始终预留滚动条空间 */
  scrollbar-gutter: stable;
  /* 如果需要同时处理水平/垂直滚动，用 stable both */
  /* scrollbar-gutter: stable both; */
}

2. 保留你原有的自定义滚动条样式不变：

.scrollable::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

.scrollable::-webkit-scrollbar-thumb {
  background: darkgray;
}

.scrollable::-webkit-scrollbar-track {
  background: #666666;
}

原理说明 #

scrollbar-gutter: stable 会强制浏览器为滚动条预留固定宽度/高度的空间，无论容器是否需要滚动。这样Grid的auto列在初始布局时就能准确计算出包含滚动条空间的宽度，避免加载时滚动条覆盖内容，同时消除窗口调整时的布局偏移。

兼容备选方案 #

如果需要兼容不支持scrollbar-gutter的旧浏览器，可以手动为容器添加等于滚动条宽度的内边距，提前预留空间：

.scrollable {
  overflow: auto;
  /* 垂直滚动预留右侧空间 */
  padding-right: 10px;
  /* 水平滚动预留底部空间 */
  /* padding-bottom: 10px; */
}

这种方法的缺点是，当容器没有滚动内容时，会多出空白区域，而scrollbar-gutter则只会在需要滚动时显示滚动条，空间始终保留但不浪费视觉区域。

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