滚动条之el-scrollbar

<el-scrollbar style="height:100%">
    <div class="service-catalog-container" id="service-catalog-container">
      <el-menu
        default-active="1"
        class="menu-bar-width"
        @open="handleOpen"
        @close="handleClose"
        background-color="#1e1e2d"
        text-color="#fff"
        active-text-color="#ffd04b" >
        <!--style="overflow-y: scroll;"-->
        <template v-for="(item, key) in serviceCatalogData">
          <el-submenu v-if="item.subject"
                      :key="key" :index="item.subject.name">
            <template slot="title">
              <!--<i class="el-icon-menu"></i>-->
              <span>{{ item.subject.name }}</span>
            </template>
            <el-submenu v-for="(val, index) in item.types"
                        :index="val.type.name" :key="index">
              <template slot="title">
                <!--<i class="el-icon-menu"></i>-->
                <span>{{ val.type.name }}</span>
              </template>
              <el-menu-item v-for="(svcVal, svcIndex) in val.svcInfo"
                            :key="svcIndex" :index="svcVal.svcName"
                            v-if="val.svcInfo && val.svcInfo.length > 0"
                            @click="handleClick(svcVal, svcIndex)">
                <template slot="title">
                  <i class="el-icon-document"></i>
                  <span slot="title">{{ svcVal.svcName }}</span>
                </template>
              </el-menu-item>
            </el-submenu>
          </el-submenu>
        </template>
      </el-menu>
    </div>
  </el-scrollbar>



  .el-scrollbar__wrap {
    overflow-x: hidden;
  }