Simple Flexbox Layout for Sidebar + Main Content Area
It does what it says on the tin.
When I need to create a layout for a sidebar and main content area, I usually create a container div to hold them, then two elements inside it <aside> for the sidebar and <main> for the main content. Then I use display: flex; on the container and set the sidebar to width: 25%; and the main area to width: 75%; (or 33% and 67%, for example). This works fine.
However, I'm not sure why I haven't just been going for full-blown flexbox, setting the sidebar to flex: 1; and the main area to flex: 3; meaning I am granting the space 4 units and I want the side bar to take up one of them and the main area to take up 3 of them. If using a 12 column grid approach, it is the same thing to set the sidebar as flex: 3; and the main area as flex: 9;.
Here's a small codepen to illustrate it.
I love this because the widths are perfect and I like that the 2 columns are same height. I put header and footer with this in between. But I run into problems when I want the sidebar to stay fixed and not move with the main content. I wanted to have this setup, but with fixed sidebar that can also scroll. I'm trying to search for answers, but everything I try messes up the format. It either squishes one side, or overlaps header, etc. Is there an easy way to make the sidebar (which i was going to use as nav w/ links) fixed w/ scroll, without losing the layout? Thx!
Yes, this is possible. Here's a very nice tutorial about how you might achieve it.
In short, you make sidebar 100% height of your screen (maybe height: 100vh;) and the main area the same. Then you set overflow-y: scroll (or auto) on the main area, so that can scroll vertically, while the sidebar stays in the same position.
to scroll your side bar, you need to create your own div inside the flex sidebar and set it to overflow auto and make and set a max- height to it.