两个容器动态共享垂直高度

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 计算的情况下实现，但如果有人有计算这个的想法（只有 react/vanilla）。

目标浏览器是IE11。

编辑：添加了一个新的Pen，该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);
}