html - 拆分 Pane 场景中的内部 DIV 包装(jQueryUI 可调整大小)

Question

受互联网上基于 jQueryUI 可调整大小的示例的启发，我试图更进一步，将一些 DIV 嵌套到拆分 Pane 中，但是，一旦我添加嵌套的 div，右侧就会换行到下一行。

HTML:-

<div id="splitter">
  <div id="one">
    <!--div id="nested" /-->
  </div>
  <div id="two" />
</div>

CSS:-

body, html {
  width: 100%;
  height: 100%;
  margin: 0px;
  border: 0px;
  padding: 0px;
}

#splitter {
  width: calc(100% - 2*10px);
  height: calc(100% - 2*10px);
  margin: 0px;
  border: 0px;
  padding: 10px;
  background: grey;
}

#one, #two {
  width: 50%;
  height: 100%;
  max-width: 90%;
  min-width: 10%;
  margin: 0px;
  border: 0px;
  padding: 0px;
  float: left;
  background: orange;
}

#two {
  background: green;
}

#nested {
  width: calc(100% - 2*3px);
  height: calc(100% - 2*3px);
  margin: 3px;
  border: 0px;
  padding: 0px;
  background: black;
}

JavaScript(加载时):-

$(function () {
  var innerDiv1 = $('#one');
  innerDiv1.resizable({
    handles: 'e',
    resize: function(event, ui) {
      var parent = $('#splitter');
      var child1 = $('#one');
      var child2 = $('#two');
      var parent_width = parent.width();
      var child1_width = child1.outerWidth(true);
      var child2_width = parent_width - child1_width - (child2.outerWidth(true) - child2.width()) - 1;
      child2.outerWidth(child2_width);
    }
  });
});

结果:-

• 在内部 DIV 之前:https://jsfiddle.net/ju1enzhc/2/
• 在内部 DIV 之后:https://jsfiddle.net/ju1enzhc/4/

我需要添加/更改什么才能让拆分 Pane 在添加内容时也能正常工作？

Answer 1

通过使用外部 flexbox 而不是内部 float 解决:https://jsfiddle.net/Lgwtn0nk/7/

body,
html {
  width: 100%;
  height: 100%;
}

#splitter {
  width: calc(100% - 6px);
  height: calc(100% - 6px);
  padding:3px;
  background: grey;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}

#one,
#two {
  width: 50%;
  height: 100%;
  max-width: 90%;
  min-width: 10%;
  background: orange;
}

#two {
  background: green;
}

#nested {
  width: auto;
  height: calc(100% - 6px);
  margin:3px;
  background: black;
}