在Vue项目中使用Vant UI框架时，遇到Sidebar侧边导航组件的滚动条在整个屏幕的右侧：

 需要实现的效果是：左侧导航栏有单独的滚动条，右侧主体内容也有单独的滚动条，互不干涉。

 (效果是左侧和右侧都是有一个滚动条的）

html部分：

    <div class="cate-list">
      <div class="left-nav">
        <van-sidebar v-model="activeKey" @change="changeNav">
          <van-sidebar-item
            :title="item.cat_name"
            v-for="(item, index) in cateList"
            :key="index"
          />
        </van-sidebar>
      </div>
      <div class="cate-body">
        <div
          class="cate-body-item"
          v-for="(item, index) in catev2List"
          :key="index"
        >
          <div class="title">/ {{ item.cat_name }} /</div>
          <van-grid :border="false" :column-num="3">
            <van-grid-item
              v-for="(subitem, index2) in catev2List[index].children"
              :key="index2"
            >
              <img :src="subitem.cat_icon" />
              <span class="name">{{ subitem.cat_name }}</span>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>

重点是css部分：左侧和右侧的盒子需要定宽定高，然后overflow设置为scroll。

高度可以用一屏幕的高减去底部导航栏的高度。

  .cate-list {
    display: flex;
    justify-content: space-between;
    .left-nav {
      width: 22%;
      height: calc(100vh -100px);
      overflow: scroll;
    }
    .cate-body {
      width: 78%;
      height: calc(100vh -100px);
      overflow: scroll;
      .title {
        margin-top: 40px;
        text-align: center;
        font-size: 26px;
        font-weight: bold;
      }
      img {
        width: 140px;
        height: 140px;
      }
      .name {
        font-size: 24px;
      }
    }
  }