如何设置顶部和底部固定，中间填满

如上图的样式，制作过程。

HTML

<div className="pageWrap">
        <MainHeader />
        <main className="main"></main>
        <MainFooter />
 </div>

CSS

.pageWrap{
 display: flex;
 min-height: 100vh;
 flex-direction: column;
}
.main{
 flex:1;
}