如何在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

试一下

/* 外层容器设置圆角和阴影 */
.model .box_m .box_m_b {
  width: 85%;
  height: 100%;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 2px #b22222 inset;
  position: relative;
  overflow: hidden; /* 隐藏超出圆角的内容 */
}

/* 内层可滚动容器 */
.model .box_m .box_m_b .scrollable-content {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-right: 6px; /* 为滚动条预留空间，防止内容偏移 */
  box-sizing: content-box; /* 确保padding不影响宽度计算 */
}

/* 为内层容器设置滚动条样式 */
.model .box_m .box_m_b .scrollable-content::-webkit-scrollbar {
  width: 6px;
}

.model .box_m .box_m_b .scrollable-content::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px;
}

.model .box_m .box_m_b .scrollable-content::-webkit-scrollbar-thumb {
  background: rgba(178, 34, 34, 0.6);
  border-radius: 10px;
}

<div class="model">
  <div class="box_m">
    <div class="box_m_b">
      <div class="scrollable-content">
        <!-- 你的内容放在这里 -->
      </div>
    </div>
  </div>
</div>

Answer 2

.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;
  
  /* 添加这些属性 */
  padding-right: 6px; 
  background-clip: padding-box; 
  mask-image: linear-gradient(to right, black calc(100% - 6px), transparent calc(100% - 6px));
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 6px), transparent calc(100% - 6px));
}