Javascript 将Jquery调整大小限制为容器

我在另一个div中放置了两个div。我想在主div中调整这两个div的大小。我可以使用以下代码分别约束每个div

<div id='resizable'>
<div id='div1'></div>
<div id='div2'></div>
</div>

$("#div1").resizable({ containment: '#resizable' });

---

但是我想同时约束主容器中的两个div。如何使用jquery实现这一点？

您是否尝试过maxWidth:

$("#div1").resizable({ containment: '#resizable', maxWidth: ($("#resizable").width() / 2) });

---

看起来这是一个bug：

您可以通过让div相应地调整彼此的大小来解决这个问题。您需要针对多个div调整此设置：

---

这就是你想要的吗？

这意味着它会将每个div的宽度限制在50%。我不想那样。我想动态地改变主容器内的宽度和高度。类似于jsfiddle的东西，你可以在其中拖动一条线并调整大小？是的，这就是我想要的。jsfiddle包含4个区域。在我的例子中，div的数量可以是动态的。它可以是2,3,4,5…等等。如果div2扩展，您希望div1收缩，反之亦然？否。假设div是100*100，div2是100*100。如果我调整div2的大小，div1仍然应该是100*100，而div2应该在剩余的空间中调整大小。是的，示例是正确的。但是当你增加第一层的高度时，第二层就从容器里出来了。我想在firefox中防止这种情况。尝试将第一个div的高度增加到容器的高度。第二组的文字消失了哦，是的，现在我明白了。我唯一能想到的就是使用溢出：隐藏。请参阅此处更新：您需要将溢出：隐藏添加到所有div。这可以解决我的问题。我想要的是限制调整大小的移动，以便所有div都在主容器中