Сохранить изменяемого размера дети в родителей

Я хотел бы сохранить изменяемые элементы в родительском элементе.

что я сделал:
Я уже дал свойство minHeight : и wile resizing я ограничиваю новую высоту, используя Math.max, чтобы сохранить ее на высоте 30px

ожидаемо:
Все изменяемые дочерние элементы всегда должны быть видимыми и иметь высоту не менее 30 пикселей.

выпуск:
Каким-то образом, если вы измените размер нижних элементов, в некоторых вертикальная точка появляется большая полоса прокрутки, и изменяемый размер выходит из containment:"parent" (почему?).
Напомним, что вертикальная полоса прокрутки страницы должна никогда не появляться и всегда должна быть в состоянии добраться до элемента "c".

$(".resiz").not(":last").resizable({
  handles: 's',
  minHeight : 30,
  containment: "parent",        /* seems not to work?! */
  start:function(e,ui) {
    this.other= $(this).next() || $(this).prev();
    this.startingHeight = this.other.height();
  },
  resize:function(e,ui) {
    var diffH = ui.size.height - ui.originalSize.height;
    this.other.height( Math.max(30, this.startingHeight - diffH) );
  }
});
*{box-sizing:border-box; margin:0;}
html, body{height:100%;}
#panel{
  position:absolute;
  height:100%;
  width:200px;
}
.resiz{
  height:33vh;
  width:100%;
  background:#eee;
}
.ui-resizable-s{
  height:3px;
  background:#08f;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div class='resiz'>a</div>
  <div class='resiz'>b</div>
  <div class='resiz'>c</div>
</div>

Править: кажется, это связано , но ответ не тот, что я ожидал...

1 2
javascript jquery jquery-ui-resizable

1 ответ:

Вы меняете height последнего div, но никогда не меняете размер самого div. Таким образом, containment растет с последним div выталкиваемым, и поскольку containment применяется к div изменяемому размеру, он никогда не применяется.

Так что для решения вашей проблемы, я думаю, вам нужно resize последний div, пока он не станет максимальным height, и когда это произойдет, не допускайте больше изменения размера. Вы можете сделать это так, хотя, кажется, есть более эффективный способ. Тем не менее, это даст вам немного идеи: 

$(".resiz").not(":last").resizable({
  handles: 's',
  minHeight: 30,
  containment: "parent",
  /* seems not to work?! */
  start: function(e, ui) {
    this.maxHeight = undefined;
    this.other = $(this).next();
    this.startingHeight = this.other.height();
  },
  resize: function(e, ui) {
    var diffH = ui.size.height - ui.originalSize.height;
    
    //when next div is at max height, you prevent resizing of current div
    if (Math.max(30, this.startingHeight - diffH) == 30) {
      this.maxHeight = this.maxHeight || (this.prevHeight);
      ui.size.height = this.maxHeight;
    //until it's at max div you resize next div  
    } else {
      this.other.height(this.startingHeight - diffH);
      this.prevHeight = ui.size.height;
    }
  }

});
* {
  box-sizing: border-box;
  margin: 0;
}
html,
body {
  height: 100%;
}
#panel {
  position: absolute;
  height: 100%;
  width: 200px;
}
.resiz {
  height: 33vh;
  width: 100%;
  background: #eee;
}
.ui-resizable-s {
  height: 3px;
  background: #08f;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<div id="panel">
  <div class='resiz'>a</div>
  <div class='resiz'>b</div>
  <div class='resiz'>c</div>
</div>
1