Scrollbar not appearing in 2-column fluid width la

Question

I'm using a 2-column div layout where the widths of both the left and right columns is non-deterministic. The left column div holds an image. The right column div holds a header div and a text content div below it. The width of the left column image takes precedence over the right column, and the right column gets the scraps in terms of width. Both of these columns are inside a div container, which has a fixed height (and width, but that doesn't matter). This layout is working using the following code:

.container {
    height: 200px;
    border: 1px solid black;
    overflow: hidden;
}
.left {
    float: left;
}
.right {
    overflow: hidden;
}
.scrollable-content-header {
    font-size: 25px;
    border-bottom: 1px solid black;
}
.scrollable-content {
    font-size: 18px;
    overflow: auto;
}

The text content div should be scrollable if it overflows the container height. But I can't get the scrollbar to appear on the .scrollable-content element. Here's some HTML:

<div class="container">

    <div class="left">
        <img id="image" src="http://www.webresourcesdepot.com/wp-content/uploads/image/css-icon.png"/>
    </div>

    <div class="right">
        <div class="scrollable-content-header">Lorem Ipsum</div>
        <div class="scrollable-content">
            Lorem ipsum dolor sit amet, consectetur... etc.
        </div>
    </div>

</div>

If the container element has overflow: auto instead of hidden, then a scrollbar will appear. But it will allow scrolling of the entire container. I don't want that, only the .scrollable-content should be scrollable, not including the header. I'm assuming that the overflow: hidden trick on the right column div in order to achieve the fluid width effect is causing problems.

Here's a fiddle: http://jsfiddle.net/PJdNW/
Any help is appreciated.

UPDATE
From what I understand, CSS cannot figure out what the height of the scrollable-content needs to be, so in order for the scrollbar to work and be the correct height, the pixel height of the scrollable-content needs to be set.

In my case, the height of the overall container is dynamic, so I opted for a JS solution, which gets the height of the overall container and subtracts the height of the scrollable-content header in order to get the pixel value I need for the scrollable-content (plus some fine-tuning i.e. margins).

I'll leave this question open for the moment in the hopes that I'm wrong and CSS is up to the task.

Answer 1

You have to set the height of your container, otherwise the container will automatically resize to the content length. Also, set the overflow attribute to scroll. Fix below:

        .container {
            height: 200px;
            border: 1px solid black;
            overflow: hidden;
        }
        .left {
            float: left;
        }
        .right {
            overflow: hidden;
        }
        .scrollable-content-header {
            font-size: 25px;
            border-bottom: 1px solid black;
        }
        .scrollable-content {
            font-size: 18px;
            overflow: scroll;
            height:200px;
        }

Updated fiddle: http://jsfiddle.net/hdrenollet/PJdNW/1/