размер столбца до самой длинной ячейки с flexbox, как будто сетка

Question

У меня есть следующие строки таблицы, которые я пытаюсь построить, используя flexbox без элемента таблицы или сетки CSS, и сначала смог решить проблему с ячейками с большим количеством текста, чтобы не переносить текст, что странным образомдостаточно включает в себя отключение гибкого роста и сокращения, хотя клетки должны расти или сокращаться, чтобы вместить содержимое.Но при этом я столкнулся с проблемой изменения размеров ячеек, чтобы они соответствовали содержимому именно тогда, когда я хотел бы, чтобы ячейка столбца соответствовала по размеру самой длинной ячейке столбца, которому она принадлежит.У меня есть следующий код:

.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

Звучит так, как будто вы хотите использовать элементы в стиле встроенного блока, а не flexbox:

.row {
  display: inline-block;
}

.row > div {
  border: solid;
}

В качестве альтернативы вы можете оставить flexbox, но вы потеряете свои столбцы:

* {
  display: inline-block;
}

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

.row > div {
  border: solid;
}

Answer 2

Проблема в том, что вы предполагаете, что гибкий контейнер в направлении строк имеет столбцы.Это не так.Еще меньше ассоциаций между элементами двух разных гибких контейнеров, как в вашем макете.

Если вам нужен внешний вид столбцов, установите фиксированную ширину для элементов.В противном случае таблицы и Grid являются подходящим вариантом.