Published: Wed 19 Sep 2018

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.

If you like what I write, you might like to follow me on Twitter @markconroy

Permalink

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!

Hi B,

Yes, this is possible. Here's a very nice tutorial about how you might achieve it.

https://www.bitovi.com/blog/use-flexbox-to-create-a-sticky-header-and-sidebar-with-flexible-content

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.

In reply to by B (not verified)

Permalink

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.

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.