Html 强制所有兄弟姐妹的高度相等

我有一个基于网格的布局，所有的项目都有不同的高度。如何强制所有项目具有与最高元素相同的最大高度？这是纯CSS实现的，还是我必须求助于javascript

HTML

未损坏：

此布局按预期排列，当一个项目的文本比其他项目大时，就会出现问题

---

破损：FlexBox可以轻松处理：

我补充说

.col-9{
    display: flex;
    flex-flow: row wrap;
}
.col-4{
    flex: 1 0 33%;
}

---

到。

文本正在推送父容器<代码>.bottom在这种情况下。 例如，您可以使用

最大高度

和

溢出-y:hidden

来修复

.bottom

容器。 您还可以使用

文本溢出

属性来管理

标记上的文本。
有几种方法可以解决这个问题

这是我常用的

标记“truncate”代码段

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.col-9{
    display: flex;
    flex-flow: row wrap;
}
.col-4{
    flex: 1 0 33%;
}

p {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}