div上、中、下布局，鼠标移入移出显示滚动条

<div className={styles.container_box}>
	<div style={{background:'green'}} className={styles.head_box}></div>
	<div className={styles.main_box}>
		 <div className={styles.main_container}>
            <div style={{background:'coral'}}></div>
            <div style={{background:'lightblue'}}></div>
            <div style={{background:'khaki'}}></div>
            <div style={{background:'pink'}}></div>
          </div>
	</div>
	<div style={{background:'blue'}} className={styles.footer_box}></div>
</div>

.container_box{
	height:100%;
	width:100%;
	display:flex;
	flex-direction:column;
	position:absolute;
	top:0;
	left:0;
}

.head_box{
	height:60px;
	width:100%;
	border-bottom:10px solid #eff3f5;
}

.main_box{
	flex:1;
	width:100%;
	height:0;
	overflow:hidden;
	padding-right:5px;
	&:hover{
		overflow:auto;
		padding-right:0px;
        padding-bottom:0px;
	}
    /*定义滚动条宽高及背景，宽高分别对应横竖滚动条的尺寸*/
	&::-webkit-scrollbar{
		width:5px !important;
        height: 10px !important;
        //background-color: rgba(245, 245, 245, 0.47);
	}
    /*定义滑块，内阴影及圆角*/
	&::-webkit-scrollbar-thumb{
		border-radius:20px !important;
		-webkit-box-shadow:inset 0 0 3px rgba(0,0,0,0.3) !important;
		background:#f0f0f0 !important;
	}
    /*定义滚动条的轨道，内阴影及圆角*/
	&::-webkit-scrollbar-track{
		border-radius:20px !important;
		//-webkit-box-shadow:inset 0 0 5px #f0f0f0 !important;
		background:transparent !important;
	}
}

.main_container{
    width: 100%;
    height: 100%;
    // border: 1px solid #c3c3c3;
    // display: -webkit-flex; /* Safari */
    // -webkit-justify-content: space-around; /* Safari 6.1+ */
    display: flex;
    justify-content: space-around;
    align-items: center;
    div {
        width: 100%;
        height: 100%;
    }
}

.footer_box{
	width:100%;
	height:60px;
	border-top: 1px solid #e5e5e5;
	display:flex;
	align-items:center;
	box-sizing:border-box;
}