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

Question

我试图使用flexbox复制表的行为，以获得更好的可预测性和控制力。 Here's a codepen of what I have currently.

这是SCSS：

.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

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

这是我所拥有的图像：

我希望Header 3的方框等于其他两个元素的宽度。此外，如果Content 2-2或Content 3-2增长，我希望所有列都扩展为具有相同宽度的最大列，类似于表。我知道我可以使用min-width部分执行此操作，但我想要一种适用于任何宽度的动态内容的方法。

Answer 1

在一天结束时，要执行此操作（使用flexboxes），标题和下面的内容将需要按列分组，而不是现在所有标题位于同一行的方式。我相信我提到的方式无论如何更有意义，但也许你需要不同的东西。

这是我所描述的JSFiddle。如您所见，在每列中，每个元素将动态调整为该列中最大元素的宽度。此外，flex-basis：0可确保每列的大小调整为与最大列相同的宽度。如果一列的宽度调整大小，它们都可以。

我所做的一切都是从行切换到列：

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

如果您对此有疑问或者我错过了标记，请告诉我。