How to Fix Overflow Issues in CSS Flex Layouts

Want to read the how-to? Continue below!

—–

NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE INVESTING IN DIGITAL TRANSFORMATION & PRODUCT DEVELOPMENT IN 2024.

I recently ran into an odd overflow problem in Firefox, Safari and Edge. I had a simple flex column layout that needed to scroll on overflow. It looked great on Chrome of course, but wouldn’t overflow on other browsers. The content would just expand to its full height and blow out the layout.

Chrome	Firefox / Safari / Edge

The Setup

The goal here was to create a list of content with a fixed header section above it. The list content was of an unknown length and would need to scroll. To make things a little more complicated, there was some additional content intertwined in the container divs and this entire component was destined to be used in several places.

“Easy,” I thought. I whipped up a quickflex-direction: column; container with a fixed div for the heading content and an overflow div container with its overflow content under that.

I tested in Chrome – looks great
I tested in Firefox and Safari – looks great.

I cleaned up the code, submitted the PR, and marked my ticket Ready for QA. Done.

…until a week later when the bug ticket came in. Scrolling wasn’t working in Firefox. …What?

The Results

Under certain circumstances overflow needs a little extra love. It turns out that there was a feature in the flexbox specification that added an implied minimum size for flex items. This feature was removed and then re-added back into the spec at some point.

Lucky for us, the fix is an easy one. Simply add min-height: 0; to the flex child that has our overflow container.

  <div class="main-container"> // flex-direction: column;
    <div class="fixed-container">Fixed Container</div> // height: 100px;
    <div class="content-wrapper"> // min-height: 0; goes here
      <div class="overflow-container">
        <div class="overflow-content">
          Overflow Content
        </div>
      </div>
    </div>
  </div>

Boom! Done.

CodePen

Check out the code on CodePen.

Conclusion

It’s a super simple fix to an oddball edge case that took me a number of hours to find a solution for. Hopefully this saves you a bunch of time and hair pulling.

Play around with the CodePen, change things and make the knowledge your own. As always, if you have any comments or ideas to share, please leave them below or look me up on Twitter!

Need efficient and scalable software solutions? Learn more about our software development expertise.