老师，侧边栏置顶了，侧边栏无法滚动

<template>

<div class="category">

<header class="g-header-container">

<category-header/>

</header>

<div class="g-content-container">

<div class="sidebar">

<category-tab @switch-tab="getCurrendId" />

</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: {

getCurrendId(id) {

this.curId = id;

}

}

};

</script>

<style scoped>

@import "~assets/scss/mixins";

.category{

overflow: hidden;

width: 100%;

height: 100%;

background-color: $bgc-theme;

}

.g-content-container{

display: flex;

}

.sidebar{

width: 80px;

height: 100%;

}

.main{

flex: 1;

height: 100%;

}

</style>

老师，侧边栏置顶了，侧边栏无法滚动，

.g-content-container{

display: flex;

}

视频中和源码.g-content-container只设置display: flex;，是不是不少设置了，导致侧边栏置顶和无法滚动？