Как в flex сделать при срабатывании wrap ширину дочерних элементов 100%?

Question

[Ispanec1998]

Есть блок в котором список элементов
Есть минимальная ширина для них
Как сделать так, чтобы при невозможности засунуть 2 элемента в ширину, они занимали 100% ширины блока
А при возможности разместить 2 и более элементов, принимали автоматический максимальную ширину, которая не меньше указанной минимальной, но растягивающиеся до тех пор, пока мы уже не сможем разместить 3, 4 и более элементов по ширине
https://playcode.io/1012734

Comments

[Ankhena]

flex-grow

[Ispanec1998]

Ankhena,
Последний элемент получается не как все, а длинной во всю ширину
Как сделать, чтобы все дочерние элементы были одинаковой ширины?
https://playcode.io/1012734

[Ankhena]

Как сделать так, чтобы при невозможности засунуть 2 элемента в ширину, они занимали 100% ширины блока

Как сделать, чтобы все дочерние элементы были одинаковой ширины?

Тут нужно определиться, что всё таки вам нужно.
Либо 100% либо одинаковые...

Если последнее, то разумнее перейти на гриды. Что-то типа

grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

. Или auto-fill (разница только для случая, когда всё в одну строку)

[Сергей delphinpro]

Ispanec1998,

Как сделать, чтобы все дочерние элементы были одинаковой ширины?

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

На сегодня это устаревший хак. Просто переключитесь на гриды.

[Ispanec1998]

Ankhena, спасибо, то, что и искал

[Ispanec1998]

Сергей delphinpro, да, грид именно то, что и хотел, спасибо