是否可以使用flex-start填充空白空间？

Question

我使用flexbox，我的flex项可以折叠。如果我使用“ align-items：stretch”，它们将无法折叠。如果我使用“ flex-start”，那么会有很多空白。问题是我不知道在未折叠时如何处理空白空间。可以像我使用“ stretch”那样设置元素的高度吗？

如果没有，还有什么选择？

逻辑看起来像这样：https://codepen.io/darius9171/pen/qyVERX

或：

document.querySelectorAll('.item').forEach(item => {
    item.addEventListener('click', (event) => {
        event.currentTarget.classList.toggle('collapsed');
    });
})

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  border: 1px solid black;
  width: 100%;
}
.container .item {
  flex-basis: calc(100% / 3 - 1rem);
  flex-grow: 1;
  width: 50px;
  background-color: black;
  margin: 0.5rem;
  color: white;
  text-align: center;
  cursor: pointer;
}
.container .item:nth-child(1) .body {
  height: 25px;
}
.container .item:nth-child(2) .body {
  height: 50px;
}
.container .item:nth-child(3) .body {
  height: 75px;
}
.container .item:nth-child(4) .body {
  height: 100px;
}
.container .item:nth-child(5) .body {
  height: 125px;
}
.container .item .body {
  transition: all 0.7s ease-in-out;
  overflow: hidden;
}
.container .item.collapsed .body {
  height: 0;
}

<div class="container">
  <div class="item">
    <div class="header">Head 1</div>
    <div class="body">Body 1</div>
  </div>
  <div class="item">
    <div class="header">Head 2</div>
    <div class="body">Body 2</div>
  </div>
  <div class="item">
    <div class="header">Head 3</div>
    <div class="body">Body 3</div>
  </div>
  <div class="item">
    <div class="header">Head 4</div>
    <div class="body">Body 4</div>
  </div>
  <div class="item">
    <div class="header">Head 5</div>
    <div class="body">Body 5</div>
  </div>
</div>