Html 多行布局中的Flexbox等高行

我一直在努力用flexbox构建一个布局，我“认为”我终于接近了它。然而，我不确定我的布局方式是否是最有效的，我仍然在努力为第一行获得一个固定的高度。我需要第一行能够扩展最短高度以匹配最高行高度的高度（用于“网格”外观）

我曾尝试将父容器设置为display:flex，但这并没有奏效

我当然可以对我的结构进行回顾，因为我确实有它的功能，但我似乎已经疯了，而且不介意就如何清理它发表第二个意见

正文{
字体系列：Arial，无衬线；
字体大小：12px；
}
/*----Flexbox容器----*/
.包装纸{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
溢出：隐藏；
}
.集装箱{
显示：-webkit flex；
显示：-ms flexbox；
显示器：flex；
}
#第一个容器，第二个容器，第三个容器{
弹性：1；
}
.行{
弹性：1；
}
上校{
显示器：flex；
弹性：1；
}
.img、.info{
弹性系数：0.5；
}
.title、.img、.info、.reviewText、.recomment、h3{
填充：10px 15px；
}
.头衔{
字体大小：20px；
}
浅灰色{
背景色：#B3；
}
darkGrey先生{
背景色：#5d5d；
}
.浅红色{
背景色：#744646；
}
.浅黄色{
背景色：#c2c6a1；
}
.浅绿色{
背景色：#a7c6a1；
}
@媒体屏幕和屏幕（最大宽度：767px）{
.包装纸{
弯曲方向：立柱；
}
}

简称
2017年1月1日萨莉·琼斯史努比
废话废话废话废话。
对
这是一个中等长度的标题。不过还是很短。
2017年1月1日萨莉·琼斯史努比
废话废话废话废话。
对
一个非常长的标题。比以前的标题要长得多。
2017年1月1日萨莉·琼斯史努比
废话废话废话废话。
对

像这样的东西？可能是误解了这个问题

如果为容器指定了柱弯曲方向和定义的填充高度：

.container {
    height: 300px;
}

#firstContainer, #secondContainer, #thirdContainer {
    flex:1;
    display: flex;
    flex-direction: column;
    height: 300px;
}

---

我想建议一种利用信息的方法。请查看

有了网格，它可以像这样简单：

HTML

---

下面是用上述方法实现的示例的一部分：

---

您是否只对第一行感兴趣，以便能够扩展其高度？还是希望所有行具有相同的高度？容器的数量是动态的还是具体的？抱歉，应该更具体一些。我只需要第一行的高度相同（最小列的大小与行中最大列的大小相同）。不，总是只有3列，容器的数量是静态的。我必须更详细地检查一下，如果网格系统更适合这个任务，我不反对切换到网格系统。然而，在看小提琴时，我并没有看到第一排的高度是如何相等的，但我会进一步调查。谢谢你的建议。

<div class="grid">
  <div class="content">100%</div>
  <div class="content">50%</div>
  <div class="content">50%</div>
  <div class="content">100%</div>
  <div class="content">100%</div>
</div>

.grid {
  display: grid;
  grid-auto-rows:
    minmax(auto, 1fr)
    minmax(auto, 1fr)
    minmax(auto, auto)
    minmax(auto, auto);
  grid-template-columns: repeat(2, 1fr);
}

.content:nth-child(1),
.content:nth-child(4),
.content:nth-child(5) {
  grid-column: 1 / 5;
}