I've browsed similar posts, but haven't come across one that addresses my specific issue.
The layout I'm working with has a left and right column. Within the left column, there are two rows.
My goal is to make the bottom row of the left column scrollable without overlapping with the top row content.
<div id="left">
<div class="top-row-header">
Heading for the top row
</div>
<div class="bottom-row-content">
Content that should be independently scrollable
</div>
</div>
<div id="right>
Scrollable text for the right column
</div>
Check out this fiddle for a visual demonstration: http://jsfiddle.net/bec4pm98/
I've made some progress, but the size of the bottom row in the left column is too large. I'd like it to adjust its size relative to the top row.