上下固定中间滚动布局(flex/absolute)

<div class="wrap">
      <div class="header">header</div>
      <div class="main">
       弹性滚动区域
      </div>
      <div class="footer">footer</div>
</div>

 

.wrap{
    height: 100%;
    position: absolute;
    overflow-y: scroll;
}
.main{
    height: 50%;
    display: flex;
    flex-wrap: wrap;
}