Take a look at this common layout with a sidebar on the left and a main section on the right. Let's look at the markup. We have the nav element for the sidebar and section for the main section on the right. Scroll up to the styles, I've added a fixed width to the nav element and a min height of 100vh to both nav and section so both of them span full height. This is what we have without flexbox, nav element and below that the main section. Now you already know how to bring them next to each other. nav and section are both child elements of the body directly so we can add display: flex to the body element itself. display: flex.

This is the expected behavior. The side navigation is anyway fixed width but we'd like to expand this main section to occupy the leftover space. How do we do that? We can't assign it a fixed width because it needs to be responsive to different screen sizes. There is a property for that in flexbox. Let's see. We want the section element to expand and occupy the leftover space so we can select section and use the property flex-grow.