我有一个包含4个div的div容器。其中有2个标题和2个内容div。点击标题将切换它们下方内容div的可见性。

我想考虑以下3种情况：

1. 两个内容div都是打开的（可见的），并且有滚动条。在这种情况下，我希望它们都占据可用空间的一半。
2. 1个内容div是打开的，有或没有滚动条。在这种情况下，我希望它占据所有可用空间或它所需的空间。
3. 两个内容div都是关闭的。在这种情况下，我希望标题div位于容器顶部。

已实现的功能

• 如果两个div都有滚动条并且是打开的，可用空间将均匀分配。
• 如果一个关闭，另一个将填充可用空间。如果两个都关闭，只有标题将显示。

未实现的功能

• 当底部内容div关闭且顶部内容div有滚动条时，顶部内容div的高度将只增长到容器高度的一半。
• 当两个内容div都打开且没有滚动条时，它们将增长到容器高度的50%，并在内容div和下方的标题div之间创建空白间隔。

这是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;
  }
}

这是代码pen的链接。

我尝试过的事情

• 我还尝试使用max-heigth: calc(50% - 35px)（标题高度为35px），这解决了增长的内容div导致出现空白间隔的问题，但这也使得如果另一个内容div关闭，内容div将不会增长超过该高度。
• 仅使用flex-grow: 1而不使用flex-basis: calc(50% - 35px)和max-height: calc(50% - 35px)可以使内容div增长超过容器高度的约50%，但如果一个内容div具有更多元素，会导致内容div的高度不均匀，从而导致可用空间不均匀分配。