Как корректно изменять ширину flex-элементов при ховере?

Question

[Полина Емельянова]

Добрый день, коллеги.
У меня вопрос из области поведения флекс-бокс элементов в контейнере с заданным flex-wrap: wrap;

САБЖ:
Есть флекс контейнер, в котором находятся флекс-элементы с исходной шириной в %%.
Я хочу сделать так, чтобы на ховер, их ширина вырастала, скажем, в двое, а соседи просто отскакивали на другую строку.

БАГА:
Сейчас этот фокус работает только с ПЕРВЫМ в строке элементом. Остальные ведут себя или никак(ФаерФокс) или дергаются как припадочные (Хром)

Есть решение задать им scale(1.5), но это не то поведение, что мне нужно.

ПОТРОГАТЬ КОД

ВОПРОС:
Что я не учла при задании свойств элементов? Где я ошиблась?
Как мне нужно построить лайаут, чтобы получить желаемое поведение?
Это вообще реально для ФБокса?

Заранее БЛАГОДАРЮ за конструктивный ответ!

Answer 1

[Андрей Федоров]

https://codepen.io/aliencash/pen/KEqaVz

Comments

[Полина Емельянова]

Благодарю вас, но вы поломали мне сетку.
3 на большом экране,
2 на планшете
1 на мобиле.

[Андрей Федоров]

Полина Емельянова, просто не все правки в код сохранил. смотрите еще раз.

[Полина Емельянова]

Андрей Федоров, СУУУУПЕЕЕРРР!!!!
Т.е. вы тут используете минимальную ширину, как основу для сетки, так? Я пытаюсь понять ход вашей мысли.)))

[Андрей Федоров]

Полина Емельянова, нет. Но flex модель обычно игнорирует width, зато не игнориуется min-width. Это позволяет управлять шириной.