两个垂直div，每个div具有最大高度的自动滚动

Question

I would like to achieve the following requirements. Let's say I have two containers (top and bottom) inside a main container:

1) Both top and bottom containers need to be scrollable only when content overflows in each container

2) Top container needs to have max height capped at 50% as content grows

3) Bottom container's max height really depends on the height of the top container. For example, if the top container contains 30% height, the bottom container be scrollable when its height becomes larger than 70%.

I tried setting the max-height to 50% for the top container scrollable area. It didn't show 50% as expected.

Is there a way to achieve this without using flex-box, as I need to support older IE versions.

Any help is greatly appreciated.

 body, html { height: 100%; } .container { height: 90%; width: 30%; display: table; } .top { padding: 24px; background: yellow; display: table-row; } .top div { overflow-y: auto; max-height: 50%; } .bottom { height: 100%; padding: 24px; background: tomato; display: table-row; } .bottom div { overflow-y: auto; height: 100%; } 

 <div class="container"> <div class="top"> <div> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> </div> </div> <div class="bottom"> <div> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> </div> </div> </div> 

Answer 1

How about this one?

 body, html { height: 100%; } .container { height: 300px; width: 100%; display: table; } .top { padding: 24px; background: #000000; height: 300px; width:40%; float:left; overflow: auto; color:#ffffff; } .bottom { height: 300px; padding: 24px; background: #ff0000; color:#ffffff; display: table-row; width:40%; float:left; } li{list-style:none;} 

 <div class="container"> <div class="top"> <div> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> </div> </div> <div class="bottom"> <div> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> <li>DYNAMIC CONTENT</li> </div> </div> </div> 

I have built up on @andrepaulo's fiddle.

Cheers