Note: This document is a work in progress. You can help improve it.

"Challenge: Quest for the Holy Grail"

From Wikipedia:

The holy grail refers to a web page layout which has multiple, equal height columns that are defined with style sheets. It is commonly desired and implemented, although the ways in which it can be implemented with current technologies all have drawbacks. Because of this, finding an optimal implementation has been likened to searching for the elusive Holy Grail.

Using flexbox, Replicate this layout:

holy grail

The above image is by David Lark - Own work, CC BY-SA 4.0.