Flexbox网格项目，在高度增加之前会使用整个宽度

Question

我正在以下网格单元中寻找flexbox：

• 沿列方向流动
• 在包裹之前使用最小高度
• 如果在包裹时所有宽度均已填满，则高度会增加

用语言很难解释，希望有一个例子可以使事情变得更清楚。在下面的示例中，我希望content的高度始终至少为100px。但是，content不应高于此高度，除非它首先填充了网格单元中的所有水平空间。

这有可能吗？

.grid {
  display: grid;
  grid-template-columns: auto 200px;
  grid-template-rows: auto min-content;
  grid-template-areas: "header header" "content sidebar";
}

header {
  grid-area: header;
  background: red;
}

.content {
  grid-area: content;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}

.content-block {
  border: 2px solid green;
  height: 100px;
  width: 50px;
}

.sidebar {
  grid-area: sidebar;
  background: blue;
}

<div class="grid">
  <header>title</header>
  <div class="content">
    <div style="height: 50px" class="content-block"></div>
    <div style="height: 75px" class="content-block"></div>
    <div style="height: 110px" class="content-block"></div>
    <div style="height: 80px" class="content-block"></div>
    <div style="height: 40px" class="content-block"></div>
    <div style="height: 40px" class="content-block"></div>
  </div>
  <div class="sidebar">
    sidebar
  </div>
</div>