html,body{height:100%} .wraper{ display:flex; flex-direction:column; height:100%; flex-wrap: nowrap; } div{ border:1px solid red; } .top{ height:20px; } .mid{ border:1px solid green; flex:1; } .bottom{ height:20px; }
<div class="wraper"> <div class="top"></div> <div class="mid"></div> <div class="bottom"></div> </div>