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

Question

对于可怕的头衔感到抱歉，但我无法简洁地描述我的问题。

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

我的网页左侧有一个固定的菜单。如果里面的选项数量是几个，则菜单是可滚动的。

JSFiddle example

滚动菜单时，滚动条会出现并叠加在内容上。我没关系......如果每次都是这样的话！

过去是风格：

overflow-y: scroll

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

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

但这种行为似乎并不一致。在工作中，使用上述样式，一切都显示得很好。按钮位于右边缘，不会在右侧切断。但是当我回到家，或者只是在其他地方工作时，滚动条会将鼠标悬停在外面，现在按钮会从边缘延伸并部分隐藏。

我认为一开始可能是跨浏览器问题，但事实并非如此。有人遇到过这个问题吗？谢谢！

P.S。 - 在任何人提到某些第三方菜单/侧边栏代码之前。那是不行的。我尝试了一些，但由于特定于工作的要求，我认为我自己更容易写这个，而不是反对任何不同意我们需求的怪癖。