html - 如何仅在Flex中用CSS相等地分隔空div？

因此，我的结构与下面的代码段非常相似。
我遇到的问题是我正在尝试使它（例如child）相对于容器始终具有相同的高度，即使它们为空。因此，如果有两个孩子，则必须有父母的50％；如果有三个孩子，则必须占父母的33.3％。
进行了大量挖掘，尝试使用flex-grow并将其设置在子级上，如果childContent类为空但空子级仍然折叠，则在childContent类上添加after内容。
甚至可以在不使用js和固定高度的情况下在子级上达到相等的高度，如果可以，如何实现？

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.child {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.childHeader {
  display: flex;
  flex-direction: row;
}

.headerItem {
  background-color: red;
}

.childContent {
  background-color: white;
}

.childContent:empty:after {
  content: '.';
  visibility: hidden;
  min-height: 300px;
}

.contentItem {
  background-color: skyblue;
  border: 3px solid black;
}

<div class="container">
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
      <div class="contentItem">1</div>
      <div class="contentItem">2</div>
      <div class="contentItem">3</div>
      <div class="contentItem">4</div>
      <div class="contentItem">5</div>
      <div class="contentItem">6</div>
      <div class="contentItem">7</div>
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
</div>

最佳答案

检查一下，我不确定这是否是您想要的。
 我刚刚在您的min-height: calc(100vh - 60px);中添加了.childContent

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  overflow: auto;
}

.child {
  display: flex;
  flex-direction: column;
}

.childHeader {
  display: flex;
  flex-direction: row;
}

.headerItem {
  display:flex;
  flex-basis:100%;
  background-color: red;
}

.childContent {
  background-color: grey;
  position: relative;
  display: block;
  min-height: calc(80vh - 60px);
}

.childContent:empty::after {
  content: '.';
  visibility: hidden;

}

.contentItem {
  background-color: skyblue;
  border: 3px solid black;
}

<div class="container">
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
      <div class="contentItem">1</div>
      <div class="contentItem">2</div>
      <div class="contentItem">3</div>
      <div class="contentItem">4</div>
      <div class="contentItem">5</div>
      <div class="contentItem">6</div>
      <div class="contentItem">7</div>
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
  <div class="child">
    <div class="childHeader">
      <div class="headerItem">1</div>
      <div class="headerItem">2</div>
      <div class="headerItem">3</div>
      <div class="headerItem">4</div>
      <div class="headerItem">5</div>
      <div class="headerItem">6</div>
      <div class="headerItem">7</div>
    </div>
    <div class="childContent">
    </div>
  </div>
</div>

签出这个https://developer.mozilla.org/en-US/docs/Web/CSS/calc