flex 3 rows layout

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>

JS Bin on jsbin.com