如何防止滚动条显示时子元素宽度被改变？

我正在制作一个带滚动条的菜单，当菜单项垂直溢出时滚动条会显示，但滚动条显示时内部菜单项的宽度会发生变化。

滚动条未显示时：

滚动条显示时：

我的代码基于Tailwind CSS，需要保持菜单项的宽度继承属性不变，该如何解决？

解决方法 #

滚动条出现时会占用额外水平空间，导致容器宽度收缩，进而影响内部菜单项宽度。可以通过以下两种Tailwind兼容的方案解决：

方案一：预留滚动条空间（推荐）

使用scrollbar-gutter: stable属性（Tailwind v3.2及以上版本支持），它会提前为滚动条预留固定空间，无论滚动条是否显示，容器的可用宽度都保持一致，菜单项宽度自然不会变化。

直接在容器上添加内联样式：

<div class="overflow-y-auto" style="scrollbar-gutter: stable;">
  <!-- 你的菜单项 -->
</div>

或者在tailwind.config.js中自定义工具类，方便复用：

module.exports = {
  theme: {
    extend: {
      utilities: {
        'scrollbar-stable': {
          'scrollbar-gutter': 'stable',
        },
      },
    },
  },
}

之后直接使用自定义类：

<div class="overflow-y-auto scrollbar-stable">
  <!-- 你的菜单项 -->
</div>

方案二：固定容器宽度+菜单项占满宽度

给菜单容器设置固定宽度，同时让菜单项宽度设为w-full，确保菜单项始终填满容器，不受滚动条影响：

<div class="w-64 overflow-y-auto">
  <div class="w-full px-4 py-2">菜单项</div>
</div>

针对你的代码，只需给菜单外层容器添加scrollbar-gutter: stable样式，就能解决宽度变化的问题。

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