How to fix background stretching on flex items?

Question

css

Beaver everyone. A small question surfaced the other day, I have elements with a certain border-radius near the background, but when the display is reduced until they become in 2 rows, problems begin, namely, it confuses me that the background of the elements begins to swell because of which the symmetry is lost how can this be corrected?
Here is an example

Answer 1

https://codepen.io/anon/pen/oRyVep

Answer 2

Try to set flex-basis not as a percentage, but as a fixed width. In your example, try changing line 9 to:
flex-basis: 100px;