覆盖滚动条阻止访问我的内容

Question

我有一个显示选项的框，单击右侧的箭头即可访问更多选项：

这在使用覆盖滚动条的浏览器中成为一个问题，如下所示在 Firefox 中：

滚动条覆盖了我的箭头，因此用户无法单击它们。 我还没有找到一种方法来防止这种行为而不禁用本机滚动条并编写自己的代码。

向框添加填充以便滚动条显示在其上方是很容易的，但随后我会在 Edge 中看到一个难看的空白区域，例如，它不使用覆盖滚动条。

scrollbar-gutter

没有帮助，因为它与我想要的相反：当有覆盖滚动条时，我希望在右侧有一个空白空间，并且没有静态滚动条。 （当然，如果没有滚动条，也不会丢失空间，这可能会发生。） 我知道我可能可以用 Javascript 做一些事情，检查我的框是否可滚动，检查其内部和外部宽度并相应地添加填充，但我非常喜欢原生 css 解决方案（如果存在）...