How to Fix Overflow Issues in CSS Flex Layouts

   Customer Experience
How To Fix Overflow Issues in CSS Flex Layouts

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.

Flex column layout in Chrome Flex column layout in FireFox/Safari/Edge
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?

Carmelo Anthony looking astonished


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!


This website uses cookies

These cookies are used to collect information about how you interact with our website and allow us to remember you. We use this information in order to improve and customize your browsing experience, and for analytics and metrics about our visitors both on this website and other media. To find out more about the cookies we use, see our Privacy Policy.

Please consent to the use of cookies before continuing to browse our site.

Like What You See?

Got any questions?


>