How to solve last items in directory issue on flexbox?

Question

css

There is a block with product cards, the parent is set to:

div{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

The rest I think is not so important.
And everything is fine, exactly until the moment when the cards if the block is 2 on 2 of them are 4, 3 on 3 of them are 9, etc. But if, for example, a block of 20 elements, 4 per line, has pagination and is smaller on the last page, let's say 18, then such garbage as in the picture comes out. The question is how do you solve this problem? And how to make the last elements pressed to the left edge. Yes, the layout is not fixed, there is still an option that there are 2 cards per line, and this also needs to be taken into account. Yes, I would like to do without JS.

Answer 1

.cart:last-child{
    margin-right: auto;
}

Answer 2

You can add more of the same elements with some class like .cart-empty and reset the height and all padding for them, the width should remain the same as for a regular element.
As a result, these elements will not be visible, but they will take up space. If you make too many of them (for example, at a certain resolution there will be 2 cards in a row, and 3 empty elements), then there will be no problems either, because the height is zero and the whole thing just collapses.
The solution is not the best one, since extra html code is added, but it is effective and simple.