JSFiddle - React, Tailwind, and code Playground

HTML

<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}

#header{
   height:100px; top:0; background: #4A4A4A;

}
#footer{
  height:100px; bottom:0; background: #4A4A4A;
}
#content{
  top:100px;
  bottom:110px;
  height: 100%;
  background:#fff;
}

</style>

<div>
<div id="header">HEADER</div>
<div id="content">
  

  <div style="background-color: #cdcdcd; min-width: 100%; min-height: 100%;">
      

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left; overflow-y: scroll;">
        <div style="background-color: blue;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          <div style="overflow: auto; max-height: 100%; padding: 10px;">
            d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!
          </div>
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          middle
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          right
        </div>
      </div>
      <div style="clear: both;"></div>

  </div>



</div>
<div id="footer">FOOTER</div>
</div>