如何解决垂直滚动条显示/隐藏时的宽度计算错误问题？

问题背景 #

我开发了一个带侧边栏树形浏览器的网站，在Ubuntu桌面版Chrome 111.0.5563.64中，切换子树时树形浏览器的宽度会出现计算错误。页面采用Grid布局：

• 左侧黄色div为树形浏览器，高度固定，内容过长时需支持垂直滚动
• 右侧蓝色div用fr单位自适应水平宽度，鼠标悬停树形节点时更新内容

宽度计算错误仅在滚动条显示/隐藏的场景下出现。

重现步骤 #

• 展开“node /1”：黄色div出现滚动条，绿色边框显示文本溢出
• 鼠标移至“node /1/1”：蓝色div内容更新，文本溢出消失
• 折叠“node /1”：黄色div滚动条消失，绿色边框显示虚假内容
• 鼠标移至“node /2”：蓝色div内容更新，虚假内容消失

原因分析 #

Chrome处理滚动条状态变化时，宽度计算顺序存在逻辑矛盾：

1. 先根据预估的滚动条状态计算黄色div的容器宽度
2. 再根据内容高度实际判断是否显示滚动条
3. 最后根据实际滚动条状态调整内容宽度

步骤1的预估状态和步骤2的实际状态不一致，导致容器宽度与内容宽度不匹配，出现溢出或虚假内容。只有当滚动条状态不变时（如步骤2、4），计算才会正确。

现有方案的不足 #

目前通过setTimeout将右侧蓝色div内容重置操作推入任务队列触发重排，但存在视觉闪烁，会强制两次reflow，且依赖任务队列降低了代码可预测性。

纯CSS解决方案 #

方案1：强制侧边栏始终显示滚动条 #

给左侧树形浏览器容器设置overflow-y: scroll（替代auto），让滚动条始终存在，从根源避免滚动条状态变化导致的宽度计算问题。还可通过样式优化非活跃状态的滚动条视觉效果：

.tree-sidebar {
  overflow-y: scroll;
  /* Firefox 优化滚动条样式 */
  scrollbar-width: thin;
  /* Chrome 优化滚动条样式 */
  &::-webkit-scrollbar {
    width: 8px;
  }
  &::-webkit-scrollbar-track {
    background: transparent;
  }
  &::-webkit-scrollbar-thumb {
    background-color: rgba(0,0,0,0.2);
    border-radius: 4px;
  }
}

方案2：用minmax固定侧边栏基础宽度 #

给侧边栏设置最小固定宽度，结合minmax确保宽度不会因滚动条变化被挤压：

.grid-container {
  display: grid;
  grid-template-columns: minmax(240px, auto) 1fr;
}
.tree-sidebar {
  overflow-y: auto;
  box-sizing: border-box;
}

滚动条出现时会占用最小宽度内的空间，不会影响容器整体宽度的计算逻辑。

方案3：用contain: layout强制独立布局计算 #

给侧边栏容器添加contain: layout属性，告诉浏览器该元素的布局变化不会影响其他元素，强制浏览器重新计算布局时优先考虑滚动条状态：

.tree-sidebar {
  contain: layout;
  overflow-y: auto;
}

该属性会让浏览器对侧边栏进行独立布局计算，避免与右侧fr单位元素产生布局冲突。

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