400px is too small as the site clearly needs to start reforming around 800px as 3 columns are very small at that point. You probably want to go to 2 columns at around 800px and then around 500px go to one column.
Forget about specific device breakpoints and just use your eyes. It is very clear that around the 800px mark the three columns are squashed very small and should you have any real content inside then you would need to make more room for the content.
Adjust the design when the design needs to change and in that way you cater for all devices.
Just because you use flexbox doesn’t alleviate the need to change the design as the viewport grows or shrinks unless you have a linear wrapping type of design. You can include min-width in your flexbox element rules to stop elements getting too small but that doesn’t work in IOS properly so you are better off using media queries to bring it all under control.
Some simple flexbox layouts can work without media queries but they are usually straightforward designs. Most of the time you want to move the side columns properly and arrange the content better as you get smaller.
It is possible to make a layout without breakpoints with flex. This is a variation on your’s without any breakpoints:-
I’m using the flex-basis to control when an element wraps to a new row, instead of using min-width.
Though in reality it is probable that you will need a query for something as things progress, so maybe just accept the idea.
It’s easy enough to spot if and when you do need a query just by dragging the side in and out. If the layout stands up to it, no query required. If it all goes pear shaped, you need a query, then identify the point (width) at which things look awkward to determine your break point.
You can of course use magic numbers again and change the flex:4 0 30em to perhaps flex:6 0 0% and that will work but is guesswork again (although it should raise no issue).
(As an aside note that min-width is not supported in IE11 unless its on nested flex containers. (e.g. you would need to add a wrapper that is display:flex and flex-direction:column for the min-height to take effect in IE11). )
If I’m going to make an excuse, it was the URL that prevented me noticing the error. I assumed that to be the cause of the lack of shrinking, so never spotted that I neglected to add it.
If it had normal text there I probably would have picked up on it at the time.