Nested Flex Example

Section one

Some content

Section two

Some content

Section three

Some content

Didn't you know?

You can nest flex elements inside each other!

See how the whole <body> of the page has display: flex with flex-direction: column, and the <main> element takes up as much vertical space as possible thanks to its flex: 1 property.

Then the main itself has display: flex on its own, arranging its two children horizontally by default.

We give fixed width in pixels to the <aside>, and we tell the .sections to take up the rest of the space with flex: 1.

Last but not least, even the .sections element has display: flex. In combination with some flex value on its children, the space is totally arranged.