jQuery 可排序链表在扩展时溢出到容器外？

Question

我假设这是一个相对微不足道的问题。

我有两个连接的可排序列表，每个都在一个单独的固定 DIV 中。

我将 DIV 设置为 overflow:scroll-y。

当我将 LI 对象添加到列表时，出现滚动条和列表底部被整齐隐藏的预期行为(我所期望的)，列表溢出了 DIV。

如何防止这种情况发生？

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

在样式中尝试 overflow-y:scroll 而不是 overflow:scroll-y