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 SceneKids.com 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:
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.