固定el-header后，el-main出现滚动条却是灰色状态

布局是这样：

    <el-container>
            <el-header>
                <Menu style="min-width:1420px"></Menu>
                <!-- <Navigator /> -->
            </el-header>
                <el-main>
                    <MainHeader />
                    <MainMiddle />
                    <TimeLine style="min-width:1420px"></TimeLine>
                    <MainFooter />
                    <Footer />
                </el-main>
    </el-container>

样式如下，请教一下CSS大 牛们是什么原因？

.el-container{
    position:relative;
    width:100%;
    height:100%;
}
.el-header {
    padding: 0px;
    height: 50px !important;
        
}
.el-main{
    height: calc(100vh-50px);
    overflow: scroll;
}

结果：

.el-main{
height: calc(100vh-50px);
overflow: auto;
}