Почему при переносе элементов столбцы получаются разной ширины?

Question

[johnymkp]

Почему в вертикальном флексе, когда элементы переносятся в следующий столбец, то столбцы получаются разной ширины? Вот подготовил пример в песочнице. А вот скрин, где видно, что ширина разная.

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

Это баг или как?

Comments

[Ivan Ustûžanin]

а с какого перепоя им быть одинаковой ширины, если ширина столбцов зависит от ширины текста?

[Ankhena]

Вот когда имеем дело со строками, то там все нормально - высота контейнера делится между получившимися строками поровну.

С чего бы это?
Имеет смысл почитать про flex-basis, flex-shrink и flex-grow.

[johnymkp]

Ankhena, а при чем здесь они? Это свойства не контейнера, а элементов. Элементы имеют такую ширину, какую имеют, я не хочу на них влиять через basis. Параметры расширения и сжатия я тоже не трогаю. Другое дело, что если ширина столбцов рассчитывается пропорционально самому широкому элементу, как сказал Ivan Ustûžanin выше, тогда понятно почему такая ширина у них неравномерная.

[Ankhena]

johnymkp, да, действительно, в вашей ситуации для column, grow и shrink не при чем. Увлеклась.
Но тем не менее столбцы всё равно не обещали быть равными и зависят от содержимого.

Answer 1

[Сергей delphinpro]

Занимают ширину пропорционально содержимому

Вот когда имеем дело со строками, то там все нормально - высота контейнера делится между получившимися строками поровну.

вовсе нет. просто у вас все строки одинаковой высоты. Попробуйте в одну из них добавить например <br>

Comments

[johnymkp]

Увеличил шрифт одному из элементов в строке, она стала выше второй строки.