html - 如何仅在 flex 中使用 CSS 等距空 div？

Question

所以我的结构与下面的代码段非常相似。 我遇到的问题是，我正在努力使诸如 child 之类的 div 始终相对于容器具有相同的高度，即使它们是空的。因此，如果有两个 child ，他们必须是 parent 的 50%，如果有三个 child ，则他们必须是 parent 的 33.3% 和 ec。 做了很多挖掘，尝试使用 flex-grow 并将其设置在 child 身上，如果它是空的但空 child 仍然崩溃，则在 childContent 类上添加 after 内容. 是否有可能在不使用 js 和固定高度的情况下使 child 达到相同的高度，如果可以，如何实现？

.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>

Answer 1

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

.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