Scrollbar Not Appearing In 2-column Fluid Width Layout

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 di

Solution 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/