How to control the width of a flex container when wrapping items?

Question

css

It is necessary to lay out a block of arbitrary width (outer), horizontally in the center of it there is another block (wrapper), which contains some small cards of a fixed width.

The task itself was basically solved, but I stumbled on the fact that the inner flex container (wrapper), being overflowing, transfers the next element to the next line, however, the freed width of the container remains in place, due to which the inner container (wrapper) in width becomes is equal to outer (outer) and does not align horizontally to the center.

Is it possible to somehow specify that when elements are wrapped, the right edge of the container aligns with the border of the last element in the line, and does not take up all possible space? And if not, how then to solve such a problem?

Demonstration:https://codepen.io/nikel9/pen/JjovgJa

If you uncomment the blocks after 6 in the HTML block, you can clearly see what the question is, if you wrote it incomprehensibly.

Answer 1

The problem is interesting, in general, as they say, "with an asterisk."
Users of IE and Edge are in the span, because without fit-content the task is not solved (meaning a pure CSS solution).
How to solve "for all" without using JS - I don't see what most often means "no way" :)