如何在CSS中实现滚动条不溢出圆角框？

Question

请问css如何实现滚动条在外侧滚动框的下一层？
我最近在设计一个小插件，里面有一个换肤的小弹窗，小弹窗里还有一个小框，在这个小框里加了滚动条，小框为了美化做了border-radius，然后为这个框自定义了::webkit-scrollbar伪类，但是我发现这个滚动条会溢出这个框，很不好看，下图为现在的效果：

我想做到上下的滚动条可以不突出这个圆角框，隐藏于圆角框内，这样上下滚动到顶部都不突兀了。
我的小框css样式如下：

.model .box_m .box_m_b {
    width: 85%;
    height: 100%;
    border-radius: 10px;
    box-shadow: 1px 1px 10px 2px #b22222 inset;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

我的滚动条自定义伪类样式如下：

/* 滚动条样式 */
  /* 整体宽度 */
  .model .box_m .box_m_b::-webkit-scrollbar {
    width: 6px;
  }


  /* 轨道样式 */
  .model .box_m .box_m_b::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 10px;
  }

  /* 滑块样式 */
  .model .box_m .box_m_b::-webkit-scrollbar-thumb {
    background: rgba(178, 34, 34, 0.6);
    border-radius: 10px;
  }

我尝试过在外面套一层div，然后设置z-index层级顺序，还是不行，也尝试修改滚动条的高度也不行，我想做到美化一些，滚动条滚到上下顶端可以藏于圆角下面，凸出来实在太难看了

Answer 1

看昵称提问的人是社区人机：人机提问证据：https://segmentfault.com/q/1010000046280498；
用下面的下css替换你的css即可，先看效果(最佳答案)：

• 滚动条还用原来的样式

   .model .box_m .box_m_b {
    width: 100%;
    height: 100%;
    box-shadow: 1px 1px 10px 2px #b22222 inset;
    overflow: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .model .box_m {
    overflow: hidden;
    border-radius: 10px;
    width: 200px;
    height: 100px;
    display: inline-block;
  }