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 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 quick
flex-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?
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>
Check out the code on CodePen.
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.