如何在含可切换可见性内容区的容器div中实现动态空间分配？

需求场景 #

我有一个包含2组header+content的容器，点击header可切换对应content的可见性，需满足三种场景：

• 两个content均展开且内容溢出时，各占一半可用空间；
• 仅一个content展开时，占满可用空间（或自身所需高度）；
• 两个content均关闭时，header都停留在容器顶部。

当前有效效果 #

• 两个content均溢出且展开时，可用空间能被平均分配；
• 关闭其中一个content时，另一个会填充可用空间；均关闭时仅显示header。

当前存在问题 #

• 底部content关闭、顶部content内容溢出时，顶部content只能扩展到容器高度的一半；
• 两个content均展开且无内容溢出时，它们会被强制拉到容器高度的50%，导致content和下方header之间出现空白。

HTML结构 #

<div class='flex-container'>
  <div id='header1' class='header'>
    Header 1
  </div>
  <div id='content1' class='header-content'>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
    <div class='item'>Lorem</div>
  </div>
  <div id='header2' class='header'>
    Header 2
  </div>
  <div id='content2' class='header-content'>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
    <div class='item'>Ipsum</div>
  </div>
</div>

尝试的Sass样式 #

.flex-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  width: 150px;
  overflow-y: auto;
}

.header {
  display: flex;
  align-items: center;
  min-height: 35px;
  background-color: #99e9f2;
  cursor: pointer;
}

.header-content {
  flex-basis: calc(50% - 35px);
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;

  .item {
    padding: 3px 12px;
    background-color: #e3fafc;
  }
}

已尝试的方案 #

• 设置max-height: calc(50% - 35px)：解决了content强制扩展导致的空白问题，但关闭另一个content时，当前content无法突破这个高度限制；
• 仅保留flex-grow: 1，去掉flex-basis和max-height：允许content超过容器50%高度，但两个content内容量不同时，高度无法平均分配。

内容的提问来源于stack exchange，提问作者Codekid