Two Columns With Flexible Scroll Overflow

I have a two column layout. The left column is a list of repeated messages and the right column several different menus. I want the two columns to always be the same height as the right column and the messages in the left column should overflow to scroll. There is also a header in the left column that should not scroll.

The problem is that without explicitly setting the height of the scroll div it will expand to contain all spans and never overflow. How do I make the left column the same hight as the right with the overflow scrolling? For an example of what I want, uncomment the height:120px line in .scroll. Here is a JSFiddle

Here is a mock up of the basic structure

<div class='table'>
<div id='c1' class='column'>
    <h4>Column 1</h4>
    <div class='scroll'>
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
        <span></span><span></span><span></span>
    </div>
</div>
<div id='c2' class='column'>
    <h4>Column 2<h4>
</div>
</div>

And the css

div.table {
    display:table;
    width:500px;
}

div.table div.column {
    display:table-cell;
}

#c1 {background-color:blue;}
#c2 {background-color:red; height:150px;}

.scroll {
    background-color:#ccc;
    overflow-y:auto;
    //height:120px;
}

.scroll span {
    height:28px;
    background-color: #999;
    display:block;
    margin-top:2px;
}

I am trying to do it without any JS - but I may have to use it. I tried a solution using display:flex but was unable to get that as close as this one.

Edit: I don't actually know the height of the right column. It changes based on dynamically generated content - and can grow if someone expands menus. I want to the left column to stay fixed to the right columns height with the overflow scrolling. I've updated the jsFiddle: http://ift.tt/1GbWFRs