兩個容器動態共享垂直高度

Question

我有兩個容器需要共享父級的高度，但第二個容器是根據需要動態添加的。在兩個容器中可以有很多內容，因此必須給出滾動的機會。

我有一個50/50份額的工作解決方案，但我想知道是否可以動態分享高度。包裝部件

.wrapper__container { 
    display: flex; 
    height: 100%; 
    max-width: 100%; 
    flex-wrap: wrap; 
    align-items: flex-start; 
} 

.inside__container { 
    flex: 0 0 100%; 
    max-width: 100%; 
    overflow-y: auto; 
} 

部分渲染方法：

render() { 
    const maxHeight = this.state.showDetails ? '50%' : '100%'; 
    const minHeight = this.state.showDetails ? '50%' : '100%'; 
    return (
    <div className="wrapper__container"> 
     <Config 
     itemsGreen={this.state.itemsGreen} 
     itemsRed={this.state.itemsRed} 
     changeItemCount={this.changeItemCount} 
     /> 
     <Container 
     itemCount={this.state.itemsGreen} 
     className="inside__container" 
     style={{ 
      backgroundColor: 'green', 
      maxHeight, 
      minHeight 
     }} 
     onClick={this.handleClick} 
     /> 
     {this.state.showDetails && <Container 
     itemCount={this.state.itemsRed} 
     className="inside__container" 
     style={{ 
      backgroundColor: 'tomato', 
      maxHeight, 
      minHeight 
     }} 
     />} 
    </div> 
) 
} 

我設置一個codepen，在那裏你可以改變的項目數，測試的行爲。點擊綠色容器顯示紅色的容器。

至少這是一個很好的解決方案，將綠色容器限制在最大高度的50％，並讓紅色容器佔據其餘部分。例如，如果綠色只有20％，紅色可以達到80％。

在一個完美的世界裏，這應該是可能的，沒有js計算，但如果有人有一個想法來計算（只反應/香草）。

目標瀏覽器是IE11。

編輯：增加了一個新的Pen這是壞了，但顯示只有少數項目時所需的靈活行爲。

Answer 1

每次渲染外部容器時，都需要獲取容器的高度並將其除以2，然後將該數字應用爲每個內部div的高度。像這樣（使用jquery）：

var $two = $('<div id="two"></div>'); 
var $three = $('<div id="three"></div>'); 
$('#container').append($two); 
$('#container').append($three); 
var h = $('#one').height(); 
console.log((h/2)-1) 
if($('#two').height() < ((h/2)-1)) { 
    $('#three').height((h-$('#two').height()) - 1); 
} else { 
    $('#two').height((h/2)-1); 
    $('#three').height((h/2)-1); 
}