split paneシナリオでの内部DIVのラッピング（jQueryUIのサイズ変更可能）

Question

jQueryUIのサイズ変更に基づいてインターネット上にある例に触発されて、さらに分割していくつかのDIVを入れ子にしようとしていますが、 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/

コンテンツがそれに追加されたとき、私は適切にも、スプリットペインの仕事を持っているために/変更を追加するために何が必要ですか？

Answer 1

外フレックスボックスの代わりに、内部のフロートを使用することによって解決

：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; 
}