Main Content

No media queries used for this layout. It's based upon a layout by Heydon Pickering.

The key part is that when the layout switches from horizontal to stacked (using flex-wrap) that both the main content and the side bar take up all the space.

This div has flex-grow: 9999 whilst the sidebar has flex-grow: 1. This ensures it grows to take up all available space only after the layout switches to a vertical stack.

The sidebar nav is also set to display: flex;. However the items are forced to wrap until the vertical layout when they can display horizontally. This might work better with grid using auto-fit.

Was inspired by a Kevin Powell video.

Consequatur unde necessitatibus similique rerum nostrum ut quam aut accusantium iusto itaque?