无法滚动的问题

老师，您好，我是跟着课程老师来写代码的，写完发现分类页左边的tab和右边的content内容均不能滚动，在浏览器下查看，swiper也是有获得高度的，请教老师，这是什么原因导致的呢？代码如下：

category下的tab:

<template>
 <me-scroll :scrollbar="false">
   <ul class="tab">
     <li
       class="tab-item"
       :class="{'tab-item-active': item.id === curId}"
       v-for="(item,index) in items"
       :key="index"
       @click="switchTab(item.id)"
     >{{item.name}}</li>
   </ul>
 </me-scroll>
</template>

<script>
   import MeScroll from 'base/scroll';
   import {categoryNames} from "./config";

   export default {
       name: "CategoryTab",
       components: {
         MeScroll
       },
       data() {
         return {
           curId: ''
         }
       },
       created() {
         this.init();
         this.switchTab(this.items[0].id);
       },
       methods: {
         init() {
           this.items = categoryNames;
         },
         switchTab(id) {
           if (this.curId === id) {
             return;
           }
           this.curId = id;
           this.$emit('switch-tab',id);
         }
       }
   };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 $tab-item-height: 46px;

 .tab {
   width: 100%;

   &-item {
     height: $tab-item-height;
     background-color: #fff;
     border-right: 1px solid $border-color;
     border-bottom: 1px solid $border-color;
     color: #080808;
     font-size: $font-size-l;
     font-weight: bold;
     text-align: center;
     line-height: $tab-item-height;
     @include ellipsis();

     &:last-child {
       border-bottom: none;
     }
   }

   &-item-active {
     background: none;
     border-right: none;
     color: #f23030;
   }
 }
</style>

category下的index:

<template>
 <div class="category">
   <header class="g-header-container">
     <category-header/>
   </header>
   <div class="g-content-container">
     <div class="sidebar">
       <category-tab @switch-tab="getCurrentId"/>
     </div>
     <div class="main">
       <category-content :curId="curId"/>
     </div>
   </div>
 </div>
</template>

<script>
   import CategoryHeader from './header';
   import CategoryTab from './tab';
   import CategoryContent from './content';

   export default {
       name: "Category",
       components: {
         CategoryHeader,
         CategoryTab,
         CategoryContent
       },
       data() {
         return {
           curId: ''
         };
       },
       methods: {
         getCurrentId(id) {
           this.curId = id;
         }
       }
   };
</script>

<style lang="scss" scoped>
 @import "~assets/scss/mixins";

 .category {
   overflow: hidden;
   width: 100%;
   height: 100%;
   background-color: $bgc-theme;
   padding-top: 50px;
 }

 .g-content-container {
   display: flex;
 }
 .sidebar {
   width: 80px;
   height: 100%;
 }
 .main {
   flex: 1;
   height: 100%;
 }
</style>