[SOLVED] One page website, with a scrollable div

One page website, with a scrollable div

I need to build a one page website, with 3 divs like this:

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
.container > div {
  vertical-align:top;
 }
 .left, .center, .right {
   display: table-cell;
   height:auto;
 }
 .left, .right{
   width:200px;
 }

   <div class="container">
      <div class="left">
      <div class="middle">
      <div class="right">
   </div>

The 3 divs have auto height, the left and right one have a fixed width. The middle one contains dynamic data, and I wanted it to have a scroll bar when needed.

The problem is since i'm auto height on the 3 divs, when I add data to the middle one, the other divs change size. I'm trying to find a solution without using Javascript.

Solution

See if this is what you want?

.container{
  display: table;
  width: 100%;
  height: 100%;
 }
 body{
 margin: 0;
 }
.container > div {
  vertical-align:top;
 }
 .left, .middle, .right {
   display: table-cell;
   height: 100vh;
   box-sizing: border-box;
   
 }
 .left, .right{
   width:20%;
   background: gray;
 }
 
 .middle{
   overflow: auto;
   position: relative;
 }
 
 .in-middle{
   background: tomato;
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    margin: 0;
 }
 .in-in-middle{
   height: 1000px;
   background: tomato;
 }

<div class="container">
  <div class="left"></div>
  <div class="middle">
    <div class="in-middle">
      <div class="in-in-middle"></div>
    </div>
  </div>
  <div class="right"></div>
</div>