CSS formatting with flexbox and other divs [closed]

I am trying to format a webpage using CSS so that it looks like this:

The idea is that the page is responsive as follows; the red and blue column (left and right) should each have a set width. The center column will be collapsible (it contains a series of consistently-sized square divs inside it and should be a flexbox with:

flex-direction: row;flex-wrap: wrap;max-width: 962px;

I've tried a number of configurations with this, and the best I've gotten is that the three divs are inline, but the blue div is overlapping the yellow flexbox instead of forcing it to collapse and wrap.

Could someone give me an idea of what display/position/etc. CSS attributes I should use here?

We can just use .red, .yellow, and .blue to describe, please.

Thanks!