jQuery Sortable linked lists spilling outside container as they expand?

Question

This I'm assuming is a relatively trivial problem.

I have two connected sortable lists, each inside a seperate fixed DIV.

I have the DIVs set to overflow:scroll-y.

As I add LI objects to a list, instead of the expected behaviour (expected by me) of a scroll bar appearing and the bottom of the list being neatly hidden, the list spills out of the DIV.

How can I prevent that from occuring?

jQuery(document).ready(function(){
        $("#list1, #list2").sortable({
            connectWith: '.connectedSortable'
        }).disableSelection();

    });


<div style="padding:10px;background-color:rgb(0,0,0); width:300px; height:100px; overflow:scroll-y;">
<ul id="list1" class="connectedSortable" style="width:100px; height:10px;background-color:rgb(100,100,100);">

</ul>
</div>
<div style="padding:10px;background-color:rgb(0,0,0); width:300px;margin-top:100px;">
<ul id="list2" class="connectedSortable" style="width:300px;">
    <li>BOX1</li>
    <li>BOX2</li>
    <li>BOX3</li>
    <li>BOX4</li>
    <li>BOX5</li>
</ul>
</div>

Answer 1

Try overflow-y:scroll in the style rather than overflow:scroll-y

Answer 2

It should be overflow-y:scroll; not overflow:scroll-y;

It's a CSS3 property, but it has wide support.