Javascript - expand div to fit contents but not expand outside of container

Is it possible to do this with CSS? Given the following HTML:

<div class="main-container">
    <div class="left">
        ...
    </div>
    <div class="right">
        <div class="top">
            ...
        </div>
        <div class="bottom">
            dynamic content
        </div>
    </div>
</div>

I want bottom to scroll if it overflows the space between top and the bottom of main-container.

How can this be done without specifying the height of bottom?

I would prefer not to specify height on other elements either if possible. It doesn't right now, but top could have dynamic content as well.

The HTML above can change however necessary; what I require is the end result of a left column, a right column, and the bottom portion of the right column scrolling if its context exceeds the available space in the main开发者_运维百科 container.

---

In the end, you'll have to specify some kind of limits (either height or max-height) to your elements in order to know if the content goes beyond them.

Once you have those dimensions set up, overflow:auto; will show you scrollbars when you need them.

---

Hope this is what you are looking for:

<div class="main-container">
    <div class="left" style="float: left; width:33%">
        ...
    </div>
    <div class="right" style="float: right; width:66%">
        <div class="top" style="height: auto;">
            ...
        </div>
        <div class="bottom" style="max-height: {height of main-cont.}; overflow-y: scroll;">
            dynamic content
        </div>
    </div>
</div>