HTML：不能让孩子超出他们的父亲

Question

我有一个带有两个孩子的 div，感谢 jQuery UI 库，它们可以调整大小。

问题是，当您调整两个孩子之一的大小时，另一个孩子会溢出父亲。

我想要的是不允许溢出。 “不允许”我不是说溢出：隐藏。不允许溢出。

这里有一个 jsfiddle 的演示：https://jsfiddle.net/t8c1q1gm/

注意：我想要一个 CSS 解决方案而不是 javascript 解决方案。

HTML 代码

<div id="parent">
  <div>

  </div>

  <div>

  </div>
</div>

CSS 代码

#parent{
  height:891px;
  width:630px;
  margin-bottom:1000px;
}

#parent > div
{
  border-color:red;
  height:20%;
}

JS代码

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({ containment: "parent" });
}

Answer 1

我想这就是你需要的

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({ containment: "parent" });
    $(children[k]).resize(function() {
      var j = $("#parent").height() - $(this).siblings().height();
      $(this).css('max-height',j);
    });
}

小提琴https://jsfiddle.net/t8c1q1gm/

Answer 2

Roysh 的回答很棒，但我只是想补充一点，我注意到有一个小错误，因为只有在实际调整了 div 大小时才调用resize 事件（例如，如果您向下拖动但 div 已经处于最大值高度然后大小不能改变并且resize事件不会被调用，这意味着你必须先向上拖动一点才能再次向下拖动）。

所以我改用start 事件，只要您单击调整 div 的大小就会调用该事件。这使得流程更加一致。

var children = document.querySelector("#parent").querySelectorAll("div");

for(var k=0; k<children.length; k++)
{
    $(children[k]).resizable({
        start: function() {
            var maxHeight = $("#parent").height() - $(this).siblings().height();
            $(this).resizable("option", "maxHeight", maxHeight)
        },
        containment: "parent" });
}

这是小提琴：https://jsfiddle.net/t8c1q1gm/3/