Flex, как сделать блоки одинаковой длины?

Question

[Дмитрий]

Сабж. есть простое демо, в котором два блока с разным по длине текстом находятся внутри flex контейнера. Как заставить меньший блок расширяться до размера большего? При условии, что неизвестно какой из блоков изначально окажется меньшим, проще говоря, сделать блоки одинаковой длины. Размеры родительского элемента не заданы.

Мое решение на grid-ах То, что хочу реализовать средствами flex. Блоки всегда одинаковы по длине, вне зависимости от их содержимого.

Answer 1

[Pavel-ww]

.child {
	flex-basis: 100%;
}

Comments

[Дмитрий]

Добрый день. К сожалению, при определенный условия оно ломается

[Pavel-ww]

Дмитрий, я изменил ответ.
Дополнительно к измененному ответу
flex: 0 1 100%;
или
flex: 1 0 100%;

[Pavel-ww]

white-space: nowrap; блин))). Так можно кучу условий придумать чтобы всё сломать.

Все условия в студию

[Дмитрий]

Pavel-ww, Простите! Я просто увидел что текст начал переноситься, и добавить white-space. У меня в примере размер блока ограничен до 42 пикселей. С flex-basis в 50%, текст начнет выходить за переделы блока. Да и в целом, решение с flex-basis не выполняет требуемых условий, он не расширяет меньший блок до размера большего, а наоборот, сжимает больший блок до размера меньшего...

[Дмитрий]

Pavel-ww, Скорее всего, flex вообще не умеет подобного. Спасибо за помощь!

[Pavel-ww]

Дмитрий, flex: 1 0 100%; расширяет меньший до большего

[Дмитрий]

Pavel-ww, Может я чего-то не понимаю, я попробовал, по бокам блока, к уже существующим 24 пикселям padding-а, добавляется пустое пространство, оно и понятно, flex-basis равный 100% - задает дочернему элементу длину в 100% от родительского.

[Pavel-ww]

Дмитрий, я не понял ваш комментарий. В общем вот

[Дмитрий]

Pavel-ww,

[xdevelx]

Pavel-ww, У вас отступы у большего стали явно больше заданных падингов в 24px. Вы сказали, что flex: 1 0 100%; расширяет меньший до большего. Но это не так - больший изначально не такой по ширине. Этот код делает элементы просто одинаковыми с заданной шириной в 100%. А если у wrapper убрать display flex и оставить flex только для parent, то и вообще элементы займут 100% экрана по ширине.

[Дмитрий]

xdevelx, Именно так! Я пробовал решить проблему разными способами, в том числе и с помощью таблиц, но по итогу, получается, что только grid умеет такое...

[xdevelx]

Дмитрий, Вот видите, сами дали ответ на свой вопрос. Flex с такой задачей не справится, table ни html, ни css здесь вообще не подходят, остается только grid. Или вам нужна поддержка IE?

[Pavel-ww]

xdevelx,

У вас отступы у большего стали явно больше заданных падингов в 24px.

Ок, тогда так flex: 1 0 min-content; но white-space: nowrap; похоже не победим флексом ))

[xdevelx]

Pavel-ww, Опять «расширяет меньший до большего» не подходит - больший изначально был без переносов. И max(min, fit)-content эту задачу не решат.

[Дмитрий]

xdevelx, Конечно, желателен максимальный охват по браузерам...

[Pavel-ww]

xdevelx, это уже предмет академического интереса)). Сейчас как раз таки расширяет и изначально не было условия "без переносов". Это добавилось в процессе дискуссии. Я констатировал выше white-space: nowrap; не победим флексом. Так что спорить дальше не о чем

[xdevelx]

Pavel-ww, Так в вашем примере переносится текст в две строки при том, что места с запасом хватает. И без flex: 1 0 min-content; даже при отсутствии white-space: nowrap; никаких переносов не было.
https://codepen.io/xdevelx/pen/JjrPqwX

[xdevelx]

Дмитрий, Максимальный охват по браузерам только при помощи js.

[Дмитрий]

xdevelx, Я уже это понял! Странно, такая простоя задача а решения нет...