最长元素的嵌套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- same :0确保每一列的大小调整为与最大列相同的宽度。如果一列的宽度改变大小，它们都会改变大小。

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

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

如果你对此有任何疑问，或者我没有说中要害，请告诉我。