In CSS how to get three containers automatically resize height based on content
===

What I have is three containers with dynamically added content. Basically I want those three rows to take up the height of the browser window only. But I want them to resize automatically based on their inner content.

So if they all have the same amount of content, each of them have a height of about 33% and then an overflow: auto.  Or if one container has no content and the other two have lots of content the container with no content should have a height of 0 and the other two should be 50%. 

Also, there is no need to support IE - it's for an internal product and only chrome and firefox browsers are used so if there is a css3 solution then that is okay.

So here is the example of what I have now which **doesn't work** how I want:

HTML: 

    <div class="container">
       
        <div class="one">
         <!-- dynamically added content -->
        </div>
    
        <div class="two">
         <!-- dynamically added content -->
        </div>
        
         <div class="three">
         <!-- dynamically added content -->
        </div>
    
    </div>

CSS:

    .container {
      position: absolute;
      top: 0;
      bottom: 0;
    }
    
    .one,
    .two,
    .three {
      overflow: auto;
      max-height: 33%; 
    }

