Flexbox: Make a 2x2 grid when 4 in a row doesn't fit

Question

I have an <ul> with four <li> inside, each of these have 20% width, but a min-width of 200px. Now, whenever I resize the viewport so 4 in a row doesn't fit, instead of drawing the <li> in a 2x2 grid, it puts 3 in a row, and the one remaining on another line.

As seen here

What flexbox property I have to use to make a 2x2 grid whenever 4 items in a row doesn't fit?

Answer 1

You can use a media query to adjust the flex-basis of your <li>s when the viewport can not contain all 4 items on a single row anymore.

See this example on codepen.