flex grow

by jpeter06

HTML

<div class="cont">
  <div class="head">
  <div style="height:40px">HEAD
    </div>
  </div>
  <div class="body">
    AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>AA<br>
  </div>
  <div class="footer">
    <div style="height:40px">FOOTER
    </div>
  </div>
</div>

CSS

html, body{
  width:100%;height:100%; padding:0px;margin:0px;
}
.cont{ width:100%;height:100%; display:flex;flex-direction:column; background:tan}
.head{
  height:40px;
  background:red;
  flex-grow:0;
 
}
.body{
  background:green;
  flex-grow:1;
   overflow-y:auto;
}

.footer{
  background:blue;
  flex-grow:0;
}