TBS Dropdown Overflow Problem

HTML

<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="http://cleesh.org/js/jquery.dragsort-0.4.min.js"></script>
<ul id="list1">
    <li><div>1</div></li>
    <li><div>2</div></li>
    <li><div>3</div></li>
    <li><div>4</div></li>
    <li><div>5</div></li>
    <li><div>6</div></li>
    <li><div>7</div></li>
    <li><div>8</div></li>
    <li><div>9</div></li>
</ul>

CSS

h1 { font-size:16pt; }
h2 { font-size:13pt; }
ul { margin:0px; padding:0px; margin-left:20px; overflow: auto}
#list1 { list-style-type:none; margin:0px; white-space: nowrap; width: 100%;}
#list1 li{padding:5px; width:100px; height:100px; display: inline-block;}
#list1 div{ width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }

JavaScript

$("#list1, #list2").dragsort({ 
    scrollContainer: "#list1", 
    dragSelector: "div", 
    dragBetween: true, 
    dragEnd: saveOrder, 
    placeHolderTemplate: "<li class='placeHolder'><div></div></li>" 
});
		
		function saveOrder() {
			var data = $("#list1 li").map(function() { return $(this).children().html(); }).get();
			$("input[name=list1SortOrder]").val(data.join("|"));
		};