Как на flex можно сделать блоки с динамическим контентом равными по ширине в строке?

Question

[weranda]

Приветствую.

Вот пример но Codepen.
А вот пример со скриншота (слева: как есть, справа: как надо).


Можно ли без JS и без задания фиксированной ширины на flex'ах сделать блоки одинаковыми по ширине? Не на всю ширину родительского блока, а по ширине, размещенного в них контента.

Comments

[xdevelx]

Вся проблема в том, что таблица почему то сверстана дивами. И флексы здесь не нужны - таблица сама выстроится правильно. Если на дивах, тогда уж делайте гридами - в данной ситуации они будут уместнее флексов и решат вопрос.

[weranda]

xdevelx, Такова задача. Нужно на дивах.

[Сергей delphinpro]

weranda,

Такова задача. Нужно на дивах.

display: table
display: table-row
display: table-cell

[weranda]

Сергей delphinpro, спасибо. На флексах такое не решить?

[Сергей delphinpro]

weranda, Зачем, если есть более адекватные решения? Или вам принципиально флексы нужны?

[weranda]

Сергей delphinpro, Зачем? — Просто интересно. Решить можно разными вариантами, но хотел узнать можно ли на флексах такое сделать.

[Сергей delphinpro]

weranda, ну давай думать. Flex - это одномерная сетка. => Она не может выстраиваться в двух измерениях => нет, на флексах нельзя сделать равные колонки переменной ширины.

[weranda]

Сергей delphinpro, спасибо за разъяснение.

[Aricus]

Я делал подобное на флексах, но только с js. Могу дать, если нужно. Надобность была потому, что данных было много, и они часто не вмещались в одну строку.

[weranda]

Aricus, Спасибо, не надо. Меня интересовал вариант без JS.