Javascript 为什么兄弟div在调整大小时跳转到新行？

我在容器div上有多个div，如下所示：

<div id="container">
    <div class="resizable"></div>
    <div class="resizable"></div>
</div>

$('.resizable').resizable({
    handles: 'e',
    containment: '#container',
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var cw = 0;
        ui.element.siblings().each(function() {
            cw += $(this).width();
        });

        if(parent.width() <= cw + ui.element.width()) {
            ui.element.width(
                parent.width() - cw
            );
        }
    }
});

它们需要调整大小。使用jQuery，我可以实现可调整大小的功能，但现在，我发现了一个“功能”

当我调整任何列的大小时，如果一个或多个同级达到“容器”的限制，它们将跳转到新行，而不是停止调整大小。你可以看到一个例子

---

我想在las同级达到父级限制时停止调整大小。我尝试了很多次，但没有一篇帖子谈论它，我所做的任何变通方法都不管用。

我添加了

空白：nowrap到您的容器中，以防止元素崩溃

现在，为了控制基于多个元素的调整大小，我所能想到的就是在调整大小事件上添加一个js Threat，告诉您在子项宽度之和达到父项宽度时保持大小，如下所示：

<div id="container">
    <div class="resizable"></div>
    <div class="resizable"></div>
</div>

$('.resizable').resizable({
    handles: 'e',
    containment: '#container',
    resize: function( event, ui ) {
        var parent = ui.element.parent();
        var cw = 0;
        ui.element.siblings().each(function() {
            cw += $(this).width();
        });

        if(parent.width() <= cw + ui.element.width()) {
            ui.element.width(
                parent.width() - cw
            );
        }
    }
});

$（'.resizable'）。可调整大小({
句柄：'e'，
安全壳：“#容器”，
调整大小：函数（事件、ui）{
var parent=ui.element.parent（）；
var-cw=0；
ui.element.sibbines（）.each（function（））{
cw+=$（this）.width（）；
});
if（parent.width（））如果超过父元素的宽度限制，它们当然会跳到下面。是的，但他使用父元素作为包含元素
包含：'#container'
。当任何同级元素达到限制时，我如何告诉元素停止调整大小？？