CSS 右边距失效问题（margin-right、padding-right）

问题

页面有滚动条时，右边距不生效

解决方案

1. 在元素外层套一层div
2. 使用box-sizing：border-box

在网上看最多的两种解决方案，但是都没有解决我的问题

发现问题

父元素使用了padding的同时，使用了overflow: scroll 所以即使套一层div也无法解决

最后解决

将padding和overflow: scroll拆开，不在同一元素上使用 所以：在父元素上使用padding，加一层子元素使用overflow: scroll

<div class="drawer-content">
     <div class="drawer-content-scroll">
          <slot></slot>
     </div>
</div>

.drawer-content {
    padding: 16px;
}
.drawer-content-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    /*定义滚动条轨道*/
    &::-webkit-scrollbar {
         width: 5px;
         height: 5px;
         background-color: transparent;
    }
    /*定义滑块 内阴影+圆角*/
    &::-webkit-scrollbar-thumb {
         display: none;
         background-color: #475867;
    }
    &:hover {
        &::-webkit-scrollbar-thumb {
            display: block;
            background-color: #475867;
            border-radius: 12px;
        }
    }
}