How to control display:flex in a responsive presentation

Question

I'm learning how to use flex boxes as a beginner, and a lot makes sense.
However, I'm stuck on one aspect.

I built a web store, and use card objects to display 5 products per row.
As I resize the browser in runtime, the card size and margins adjust well when I use the following:

.flex-row {
flex: 0 0 20%;
}

However, when I get to about 1150 pixels wide, the last card rolls off the screen, and I'm down to 4 products per row.
If I change values in debug, it does what I want, but if I code the css for runtime like this:

@MEDIA (max-width: 1150px) {
.flex-row {
flex: 0 0 15%;
}
}

it doesn't work at all. The flex doesn't change during runtime when I get smaller than 1150px;

I know I'm doing something wrong. Any suggestions to get "flex" to reduce the width at runtime?

Answer 1

@Anonymous

Yes, of course I'll share my solution.
I am learning to use display: flex for responsive pages, and started by looking CSS within bootstrap.

However, the landing page for "learn.microsoft.com" has a really smooth way of shrinking the size of the page,
and I was so impressed I looked at their code. It looks to me that they did their own "bootstrap" if you will.

I discovered that there's one particular line I think is really effective:

       width: calc(100% - 15%);  
      max-width: calc(100% - 15%);  

If you put this inside a @MEDIA block, screen sizes will transition very smoothly, and can be used for any size width.
I thought it was a great help!!