Wrapping issue in flexbox?

Question

css

Good afternoon. I'm asking for help with this issue. There are regular blocks inside a flex container (3 columns, 2 rows). Block sizes are given as a percentage.
Example: codepen.io
Question:
- how do I make blocks wrap to a new line without media queries?
(I had an idea to use some kind of "wall" with a fixed min-width, but it seemed to me not a very flexible option)
- and in general, is it worth using fixed values ​​for flex elements if responsive design is supposed to be?
I'm sorry if the questions seemed "atatata Google knows, but you don't"

Answer 1

.item{
  width: calc(800px / 3);
}

But in general, media queries are better.
They are designed to be used.

Answer 2

You can specify min-width, then blocks will be wrapped on smaller monitors.
If you specify flex proportions, then the wrapped blocks will stretch to fit the screen.