Make responsive flexbox without the last row outgrowing the others

Question

There's been many questions about this topic on SO but I have yet to find a solution I could use. I have a varying number of items which should responsively fill the page with any number of rows. If the screen grows or shrinks, the boxes would either shift or resize to fit the page. This screams flexbox to me, so I did:

body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

div {
  flex-grow: 1;
  min-width: 150px;
  height: 50px;
  border: solid red 1px;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

The final row fits the page by making the items grow further, but I would like all the items to be the same size (i.e. leave blank space in the final row if necesarry).

I saw solution suggesting using dummy elements (which kinda works, if you know how many items you have) and media queries (which kinda works if you know the screen size) but I could get any of them to work.

I also realize that a grid implementation would probably be better here, but I can't figure out how to calculate the number of columns dynamically.

So if anyone could point me in the right direction, I'd be grateful. :)