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.