jQuery UI sortable containtment scroll

HTML

<div>

<ul id="list-1" class="sortable">
    <li>Drag me, then mouse over the scrollbar and use the scrollwheel
      <br/>My bounds are outside!!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
<br>
<ul id="list-2" class="sortable">
    <li>Drag me, then mouse over the scrollbar and use the scrollwheel
        <br/>My bounds are outside!!</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</div>

CSS

ul {
    border: 1px solid gray;
    list-style: none;
    padding: 0;
    display: inline-block;
    max-height: 250px;
    overflow-y: auto;
    overflow-x: hidden;
    width: 500px;
    border: 1px solid black;
    float: left;
    margin: 5px;
}
li {
    background: white;
    border: 1px solid gray;
    height: 50px;
}

div{
  height: 250px;
  overflow: auto;
  border: 1px solid gray;
}

JavaScript

$(".sortable").sortable({
    axis: "y",
    containment: "parent",
    cursor: "move",
    items: "li",
    tolerance: "pointer",
});