滚动条问题

为什么滚动条引入到里面拖动不了

//tab.vue
<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.js'

    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 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>

//index.vue
<template>
    <div class="category">
        <header class="g-header-container">
            <category-header/>
        </header>
        <div class="g-content-container">
            <div class="sidebar">
                <category-tab/>
            </div>
            <div class="main">
                
            </div>
        </div>
        
    </div>
</template>

<script>
    import CategoryHeader from './header.vue'
    import CategoryTab from './tab.vue'

    export default{
        name:'Category',
        components:{
            CategoryHeader,
            CategoryTab
        }
    };

</script>

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

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

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