Html 滚动条宽度有时仅包含在div width中

很抱歉这个糟糕的标题，但我不能足够简洁地描述我的问题

我注意到一种奇怪的行为与滚动条有关

我的网页左侧有一个固定的菜单。如果菜单中的选项数为多个，则该菜单可滚动

当您滚动菜单时，滚动条出现并叠加在内容上。我同意。。。如果每次都是这样的话

过去的风格是：

overflow-y: scroll

将强制垂直滚动条始终可见，并占用其自身空间作为包含div的宽度的一部分。所以我最后做的是有一个固定大小的外部div，然后是一个内部div，它只宽15px以隐藏滚动条

#outer {
  width: 200px;
  overflow: hidden;
}
#inner {
  width: 215px;
  overflow-y: scroll;
}

但这种行为似乎并不一致。在工作中，有了以上的风格，一切都很好。按钮位于右侧边缘，不会在右侧被切断。但当我回到家，或者只是在别的地方工作时，滚动条会把鼠标悬停在上面，现在按钮会从边缘延伸出来，部分隐藏起来

起初我以为这可能是一个跨浏览器的问题，但事实并非如此。有人遇到过这个问题吗？谢谢

在任何人提到第三方菜单/边栏代码之前。那是不可能的。我试过一些，但由于工作的特殊要求，我觉得自己写这篇文章比克服任何不符合我们需要的怪癖更容易