How to correctly change the width of flex items on hover?

Question

css

Good afternoon, colleagues.
I have a question about the behavior of flex-box items in a container with flex-wrap: wrap;
SUBJECT:
There is a flex container that contains flex items with an initial width of %%.
I want to make it so that on hover, their width grows, say, by two, and the neighbors just bounce to another line.
BAGA:
Now this trick only works with the FIRST element in the line. The rest behave either nothing (FireFox) or twitch like seizures (Chrome)
There is a solution to give them a scale (1.5), but this is not the behavior that I need.
TOUCH THE CODE
QUESTION:
What did I not take into account when setting the properties of the elements? Where did I go wrong?
How do I need to build a layout to get the desired behavior?
Is this even possible for FBox?
THANK YOU in advance for your constructive response!

Answer 1

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