jqueryui调整大小问题

简单的情况-两个div和一个div，即盒子。 外部div是可滚动的。 div.box可调整大小（w，e）。 当我尝试从右向左调整大小时，div.box会折叠为宽度：0px

现场示例如下：

我已经阅读了关于jQueryUI可调整大小的所有内容，但找不到适合我的解决方案。 我将感谢任何帮助

HTML:

Javascript:

$('.box').resizable({
    containment: 'parent',
    handles: 'w, e',
    grid: [10,10]
});

---

删除包含调用修复了问题，就我所见，无论哪种方式都是多余的：

$('.box').resizable({
    handles: 'w, e',
    grid: [10,10]
});

编辑

考虑到您的评论，您最好的选择可能是使用“maxWidth”选项，并将其设置为容器的宽度，如下所示（以小提琴中的宽度为例）

---

我找到了一个解决寄生虫div.box-wrap的方法，它不是完美的，但是一种解决方案

HTML:

其思想是：父容器将处于正常流渲染中，而不是绝对或相对位置。 更新版本：

---

现在它可以完成任务。

当我拆下安全壳时，它工作正常。我想是因为安全壳阻止了它的尺寸调整。

$（'.box'）。可调整大小({
句柄：“w，e”，
网格：[50,10]
});
.container滚动{
显示：块；
宽度：500px；
高度：100px；
溢出：滚动；
边框：1px实心#666；
}
.集装箱{
显示：块；
位置：相对位置；
宽度：1000px；
高度：100px；
填充：20px0；
背景色：#eee；
}
.盒子{
显示：块；
左：0；
右：0；
高度：50px；
背景：红色；
}

是。移除“安全壳”可解决意外坍塌的问题。但我需要一个“包容”，因为我想保持div.box不超过div.container的边界（这是必需的！）。好的，请参阅更新的答案，这应该考虑到您提到的功能。是的，请再说一遍，但maxWidth不保护div.box超过div.container的边界。例如，您可以尝试先调整div.box左侧的大小，然后调整其右侧的大小。我开始认为这是jQueryUI可调整大小的一个主要问题。当某些父级可滚动时，可能无法准确计算包含大小。
$('.box').resizable({
    containment: 'parent',
    handles: 'w, e',
    grid: [10,10]
});

$('.box').resizable({
    handles: 'w, e',
    grid: [10,10]
});

$('.box').resizable({
    maxWidth: 1000,
    handles: 'w, e',
    grid: [10,10]
});

<div class="container-scroll">
    <div class="container">
        <div class="box-wrapper">
            <div class="box"></div>
        </div>
    </div>
</div>

.box-wrapper {
    width:100%;
    height:50px;
    background-color:#fc3;
}