Compute flex element width before rendering using JS

I have a flex-box with an undefined number of cards inside it.

.box {
  display: flex;
  flex-wrap: wrap;
}

.card {
  flex: 1 210px
}

I must decide how many cards put inside my box, the number of cards displayed will be the right amount to fill exactly two rows.

===== is a card

---------------------
| ===== ===== ===== |
| ===== ===== ===== |
---------------------

This means, that, with a .box of 630px, I will display 6 cards. (630 / 210) * 2 = 6

To compute the cards number per row I'm using this code:

getCardsPerRow() {
  let listWidth = box.clientWidth
  let cardsNumber = Math.floor(listWidth / 210)
  let cardWidth = Math.floor(listWidth / cardsNumber + listWidth % cardsNumber)
  retu Math.floor(listWidth / cardWidth)
}

It works well on most of the situations. But with some widths I get a wrong number.

For example, with a box wide 1132px, I get 4, even if flexbox will put on a single row 5 cards.

What am I doing wrong?