使用el-scrollbar时 让右侧的滚动条不在盒子内，在外部

默认情况下，el-scrollbar 组件会将滚动条放在其容器内部，但您可以使用一些简单的 CSS 样式来将滚动条放在其外部。

<template>
  <div class="container">
    <div class="left">
      <!-- 此处省略内容 -->
    </div>
    <div class="right">
      <el-scrollbar wrap-class="scroll-wrap">
        <!-- 此处省略内容 -->
      </el-scrollbar>
    </div>
  </div>
</template>

.scroll-wrap {
  height: 100%;
  margin-right: -17px;
  padding-right: 17px;
}

完整：

.container {
  display: flex;
  flex-wrap: nowrap;
  height: 500px;
  margin: auto;
}
.left {
  width: 300px;
  padding: 20px;
  background-color: #f0f0f0;
}
.right {
  flex-grow: 1;
  padding: 20px;
  overflow: hidden;
}
.scroll-wrap {
  height: 100%;
  margin-right: -17px;
  padding-right: 17px;
}
.el-scrollbar__view {
  overflow: auto !important;
}
.el-scrollbar__bar.is-horizontal {
  height: 17px;
  margin-top: -17px;
}
.el-scrollbar__thumb.is-horizontal {
  height: 100%;
}
.el-scrollbar__bar.is-vertical {
  width: 17px;
  margin-left: -17px;
}
.el-scrollbar__thumb.is-vertical {
  width: 100%;
  border-radius: 0;
}