white-space: nowrap使父容器扩容却未适配滚动栏的问题解决

问题背景与复现 #

需求是侧边栏内的文本禁止换行，当文本超出容器宽度时，侧边栏自动扩容，但当前实现出现滚动栏覆盖文本的问题——容器宽度始终比内容所需宽度少了滚动栏的宽度。

最小复现示例 #

HTML代码

<html>
<body>
  <div class="sidebar">
    <span>This is some text that must not wrap.</span>
    <div class="etc"></div>
  </div>
</body>
</html>

CSS代码

* {
  box-sizing: border-box; 
  margin: 0;
}

body {
  height: 100vh;
  display: grid;
  grid-template-columns: auto 1fr;
}

.etc {
/* 仅用于演示，确保滚动栏出现 */
  height: 200vh;
}

.sidebar {
  overflow-y: auto;
}

.sidebar span {
  white-space: nowrap;
  overflow: auto;
}

实际复杂结构示例 #

<body>
<ul>
    <li>
        <a>
            <div>
                <h2>Title</h2>
                <p>This is underneath the scrollbar.</p>
            </div>
            <div>
                <p>Some text...</p>
                <p>This is also underneath the scrollbar if it's long enough.</p>
            </div>
        </a>
    </li>
    ...
</ul>
</body>

此时最长的<p:last-child>元素会被滚动栏遮挡，长度相近的元素也会出现同样问题。

问题原因 #

当给侧边栏设置overflow-y: auto后，浏览器计算容器宽度时，会先基于不含滚动栏的内容宽度来确定容器初始宽度。当滚动栏出现时，它会占用容器的内部空间，而非让容器额外扩展宽度，导致原本的内容被滚动栏挤掉一部分，最终出现文本被遮挡的情况。

解决方案（无需手动添加内边距/外边距） #

方法1：使用overflow-y: overlay（webkit/blink内核优先） #

给侧边栏设置overflow-y: overlay，让滚动栏悬浮在内容上方，不占用容器内部宽度，这样内容不会被遮挡，容器宽度仍由内容自动调整：

.sidebar {
  overflow-y: overlay;
}

注意：该属性仅在Chrome、Edge等webkit/blink内核浏览器支持较好，Firefox和旧版IE不兼容。

方法2：嵌套容器+宽度属性（兼容多数浏览器） #

通过嵌套容器分离“滚动”和“内容宽度计算”的职责：

1. 修改HTML结构，给侧边栏内容套一层容器：

<div class="sidebar">
  <div class="sidebar-content">
    <span>This is some text that must not wrap.</span>
    <div class="etc"></div>
  </div>
</div>

2. 调整CSS：

.sidebar {
  overflow-y: auto;
  width: min-content;
}
.sidebar-content {
  width: max-content;
}
.sidebar span {
  white-space: nowrap;
}

原理：内层容器sidebar-content用max-content确保内容不换行且宽度足够，外层容器sidebar用min-content让宽度适配内层内容+滚动栏的总宽度，滚动栏不会挤压内容空间。

方法3：使用scrollbar-gutter: stable（现代浏览器推荐） #

给侧边栏设置scrollbar-gutter: stable，该属性会提前预留出滚动栏的宽度，无论滚动栏是否出现，内容宽度都不会被挤压：

.sidebar {
  overflow-y: auto;
  scrollbar-gutter: stable;
}

注意：该属性支持Chrome 94+、Firefox 93+、Edge 94+，适合目标浏览器版本较高的场景。

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