Implementing a "Mondrian" pattern using Flexbox - css

Question

The article 5 Really Useful Responsive Web Design Patterns describes a "Mondrian" pattern for layout on the web that arranges one large box on the left (2/3 or 3/4 width) with a few smaller items, stacked vertically on the right — but then in medium-sized viewports, the design shifts to show the main box at full width, with the other boxes side-by-side, horizontally below. (And on small screens, everything is 100% width stacked vertically.)
I have this pattern implemented using floating divs, but I would like to get this implemented using flexbox, so that the boxes can be of equal height no matter what. That's what flexbox is so good at!
Conceptually, I think that this can work, but I am just not having any luck at all with this. I'm surprised that I haven't found any references to this (except for a jsfiddle that's not really what I'm looking for at all.)
I believe that this could be implemented with column wrapping, and the first item's flex basis fairly large so that it takes up all of the vertical space on larger viewports, with the remaining boxes wrapped into a second column, stacking vertically. Using a media query, I think you could then just change the flex-wrap to be row-based so that the remaining smaller boxes get arranged side-by-side below the main full-width image.
And yet, I get nothing. No point even linking to my CodePen work in progress because it's just so pathetic. :-)
Anybody who is super-flexy interested in showing how this might be done?

Answer 1

/* ┌──────────────────────────────────────────────┐
│ These values determine when to switch layout │
└──────────────────────────────────────────────┘ */
.big {
flex-basis: 600px;
}
.outer.flex, .small {
min-width: 300px;
}
/* ┌───────────────────────────────┐
│ This other code makes it work │
└───────────────────────────────┘ */
html, body, .outer.flex {
margin: 0; /* Remove margins */
height: 100%; /* Fill all window */
}
.flex {
display: flex; /* Magic begins */
flex-wrap: wrap; /* Multiline */
}
.big, .small {
overflow: auto; /* In case the content doesn't fit */
box-sizing: border-box; /* Desirable if you want border or paddin */
border: 3px solid; /* Optional */
}
.big {
flex-grow: 2; /* Grow to fill available space, with factor 2 */
min-height: 50%; /* At least 50%, and allow 100% */
background: red; /* Optional */
}
.inner.flex {
flex: 1; /* Grow to fill available space, with factor 1 */
min-width: 33vw; /* At least 33% of the width of the window */
min-height: 50%; /* At least 50%, and allow 100% */
}
.small {
flex: 1 33vw; /* Grow to fill available space, with factor 1 */
/* At least 33% of the width of the window */
background: blue; /* Optional */
}
.small:first-child {
background: green; /* Optional */
}
<div class="outer flex">
<div class="big"></div>
<div class="inner flex">
<div class="small"></div>
<div class="small"></div>
</div>
</div>