How to Make Responsive, Scrollable Panels with Flexbox

If you’ve been keeping up with the work ZURB has been doing with Foundation for Apps you may have noticed most of their demo templates have some pretty nifty scrollable panels.

These are actually pretty amazing–especially for hybrid apps. Remember how handy frames were before they went out of style? Well, now you can have that functionality back, but in a responsive way.

After some tinkering I was able to pull out the base functionality of these panels and that’s what we’ll be learning how to recreate today.

1. Begin at the Beginning

We’ll start with some pretty basic markup. The most important part is a wrapping container to wrap your entire page.

<div class="wrap"><main><aside><h1>Sidebar</h1><p>
        lipsum...</p></aside><article><h1>Content</h1><p>
        lipsum...</p></article></main></div>

2. CSS

Things get interesting in the CSS pretty quickly. First, we want our html and body selectors to be height: 100%. We’re doing this to set up the .wrap element which we’ll set to height: 100vh. With the vh unit we’re saying that we want this app to take up the full height of the viewport so the elements contained within it will be forced to scroll. 

We’ll also set .wrap to be display: flex so we can give children elements a flex property.

html, body {
  height: 100%;
}

.wrap {
  height: 100vh;
  display: flex;
}

Note: Instead of remembering all the various syntaxes for Flexbox throughout the years, try using Autoprefixer. Then you just need to use the W3C spec syntax and it will do the rest to support as many browsers as possible.

3. Getting Flexible

Now that we have this “shell” set up we can begin styling very standard flex elements into it. The only trick is to make sure you set these children elements to overflow-y: scroll to enforce a scrollbar.

main {
  flex: 1;
  display: flex;
}

aside, article {
  overflow-y: scroll;
  padding: 2em;
}

aside {
  flex: 1;
}

article {
  flex: 2;
}

4. Getting Responsive

Let’s take it one step further and make our site responsive by stacking the sidebar on top of the content area for smaller devices. It’s as easy as adding one CSS rule within a media query.

@media (max-width: 800px) {
  main {
    flex-direction: column;
  }
}

Conclusion

These steps should be enough to get you started using this technique throughout your websites. Now that I know how to do it, I’m finding all kinds of places to put these scrollable panels.

To see this in action properly, check out the demo on Codepen. Also, take a look at a redesign concept I did for Stylus using this technique.

How do you see yourself using it?