如何在CSS中为垂直滚动条添加水平间距？现有方案未生效

问题背景 #

需要实现垂直滚动条与容器右侧边缘保留水平间距，尝试box-sizing+padding的方法未成功，当前代码如下：

::-webkit-scrollbar {
    margin-right: 20px; /* 此属性无效 */
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color:  #201F24;
    border-radius: 8px;
    border: 3px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2B292F;
}

#container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    padding-right: 20px; /* 试图用此创建间距 */
    box-sizing: content-box; /* 希望padding不影响滚动区域 */
}

目标效果：滚动条不紧贴容器右侧边缘（参考效果：）

当前方案的问题 #

1. ::-webkit-scrollbar的margin-right属性不生效，WebKit内核中滚动条本身不支持该属性控制偏移
2. 给容器设置padding-right:20px+box-sizing:content-box会导致容器总宽度超出父元素，滚动条仍处于容器最外侧，无法实现滚动条与容器右侧的间距

可行解决方案 #

方案一：修改滚动条轨道样式 #

直接给滚动条轨道添加右侧margin，让滚动条整体向内偏移，无需调整容器布局：

::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #201F24;
    border-radius: 8px;
    border: 3px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
    margin-right: 20px; /* 核心：让滚动条轨道与容器右侧保持间距 */
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2B292F;
}

#container {
    width: 100%;
    height: 100vh;
    overflow-y: scroll;
    /* 移除多余的padding-right和box-sizing，保持默认border-box即可 */
}

方案二：嵌套容器实现间距 #

通过外层容器的padding限制内层滚动容器的范围，间接实现滚动条与外层容器右侧的间距：

<div class="outer-container">
    <div id="container">
        <!-- 你的内容 -->
    </div>
</div>

.outer-container {
    width: 100%;
    height: 100vh;
    padding-right: 20px;
    box-sizing: border-box;
    overflow: hidden; /* 隐藏外层容器的溢出部分 */
}

#container {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
}

/* 滚动条样式保留原有设置 */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background-color: #201F24;
    border-radius: 8px;
    border: 3px solid transparent;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #2B292F;
}

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