Css 嵌套Flexbox行最长元素的宽度

我正在尝试使用flexbox复制表的行为，以获得更好的可预测性和控制

以下是SCS：

.flex-table
  display: flex
  flex-direction: column
  flex-wrap: nowrap

.flex-table-row
  display: flex
  flex-direction: row
  flex-wrap: nowrap

.flex-table-item
  flex-basis: 0
  flex-grow: 1

.flex-table-item > :nth-child(3n + 3)
  border: 1px solid red
  flex-grow: 0
  white-space: nowrap

我的问题是，如何获得列中每个元素的宽度，以占据其内容的宽度或列中最大元素的宽度，以较大者为准

以下是我所拥有的图像：

---

我希望

标题3

框的宽度等于其他两个元素的宽度。另外，如果

Content 2-2

或

Content 3-2

增长，我希望所有列都扩展为与最大列的宽度相等，类似于表。我知道我可以用

minwidth

部分实现这一点，但我需要一种适用于任何宽度的动态内容的方法。

在一天结束时，要做到这一点（使用FlexBox），标题和下面的内容需要按列分组，而不是现在所有标题都在同一行的方式。我相信我提到的方式更有意义，但也许你需要一些不同的东西

下面是我所描述的一个例子。如您所见，在每列中，每个元素将动态调整为该列中最大元素的宽度。此外，flex basis:0确保每列的大小都与最大列的宽度相同。如果一列的宽度调整了大小，它们都会调整

实际上，我所做的只是从行切换到列：

.flex-table-column {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
}

---

如果您对此有任何疑问或我没有注意到，请告诉我。

@AlvaroJoao我尝试过使用

min width

和

flex grow:1

，但

min width

不适用于动态内容，和

flex grow:1

占用了最大的可用空间。您可能必须更改结构…flexbox不能替代表。@Paulie_D如果有办法与固定表（占用内容宽度的列或列中最宽元素的宽度以及填充剩余空间的其他列）具有相同的效果，请告诉我，我将永远感激你。我不知道。我想在这里用一张桌子。。。毕竟这是你真正想要的。@Paulie\u D我该怎么做（列占用内容宽度或列中最宽元素的宽度，以及其他填充剩余空间的列）对于具有

表格布局的表格：fixed

。如果将

空白：nowrap

和

flex grow:0

添加到要显示行为的列中，则它将按指定方式工作。这是一个很好的答案，但我不能使用它，因为flex表是用angular2填充的，使用行而不是列需要运行昂贵的筛选器才能运行5次。对不起！这是我唯一能想到的纯CSS方式。你会考虑使用JavaScript /jQuery的解决方案吗？