My buddy Justin introduced me to flexbox a while back. Admittedly, I pushed off learning about it because it didn’t seem like the support was there at the time. While researching things for a redesign of recently, I saw support for flexbox had improved dramatically. I’m quite fortunate that the majority of my users use Chrome ;)

Fast forward to a few months into me using flexbox pretty heavily. The running joke between Justin and I was that “you could use flexbox for that”. It was all fun and games until he brought a problem to me that he was trying to solve:

justin [9:01 PM] got a bitch of a CSS challenge

josh [9:01 PM] flexbox

justin [9:01 PM] two columns, that scroll independently, with a row on top

josh [9:02 PM] flexbox?

justin [9:02 PM] lol, don’t think flexbox has a fix for this one :wink:

In the words of Barney Stinson, “CHALLENGE ACCEPTED”. I proceeded to mock something up that satisfied the requirements. The header was to be fixed. There would be two columns of equal width. They also needed to fill the rest of the viewport. Flexbox made this all too easy:

The Markup

<!doctype html>
    <div class="container">
      <div class="top">Fixed Top</div>
      <div class="content">
        <div>Column 1</div>
        <div>Column 2</div>

The Styles

body {
    margin: 0;
.container {
    height: 100%;
.content {
    display: flex;
.container {
    flex-direction: column;
.content div {
    flex: 1;
.content div {
    overflow: scroll;

What’s really awesome is that you can have any number of independently scrolling columns inside of .content. Any new div will be flex: 1 and will be distributed evenly with the rest of the columns.

You can see the code in action by checking it out on Codepen.