使用flexbox将size列调整为最长的单元格，就像网格一样

Question

我有一个表格的下列行，我正在尝试使用没有表格元素或css网格的flexbox构建，并且首先能够解决具有大量文本的单元格无法包装文本的问题，这奇怪地涉及到禁用尽管细胞需要生长或收缩以容纳内容物，但柔韧生长和收缩。但是在这样做的时候，当我希望将列的单元格调整为它所属的列的最长单元格时，我遇到了正在调整大小以适应内容的问题。我的代码如下：

.row {
  display: flex;
}

.row > div {
  border: solid;
  flex: 0 0 auto;
}

<div class="box">
  <div class="row">
    <div>
      joe smith
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
  </div>
  <div class="row">
    <div>
      100 Broadway st. New York City, New York 100 Broadway st. New York City, New York
    </div>
    <div>
      joe smith
    </div>
    <div>
      100 Broadway st. New York City, New York
    </div>
  </div>
</div>

可以在这里找到一个可见的例子：https://jsfiddle.net/pefm968u/3

Answer 1

问题是你假设一个行方向的flex容器有列。它没有。两个不同的flex容器之间的关联甚至更少，就像你的布局一样。

如果需要列的外观，则在项目上设置固定宽度。否则，表格和网格是要走的路。

Answer 2

听起来你想要使用内联块样式元素，而不是flexbox：

.row {
  display: inline-block;
}

.row > div {
  border: solid;
}

或者你可以保留flexbox，但是你会丢失你的列：

* {
  display: inline-block;
}

.row {
  display: flex;
  flex-direction: column;
}

.row > div {
  border: solid;
}