Why won’t my scrollable container scroll? How to fix horizontal scrolling within a flexbox layout. I’m writing this because I recently had an annoying issue where I could not get a container to horizontally scroll its contents while it was within a flex box.
I built a layout using CSS flexbox, and within the main content I had a table which I wanted to horizontally scroll. Frustratingly, I found that the table wouldn’t scroll and instead, pushed the width of the whole layout out. This meant my sidebar was pushed out and the whole page was at more than 100% width, plus scrolling horizontally — not ideal!
Here’s an example. In this pen below, the .big-width-thing is pushing the whole layout out, making the whole page horizontally scrollable. Its container has its overflow set to scroll, yet wasn’t scrollable.
See the Pen Untitled by Rich (@redigitaluk) on CodePen.
A grid fix
The fix is super simple, but took some figuring out. The flexbox is trying to control the width of the column based on the largest thing within it. Therefore the overflow container is the same size as its content, which is why it is not scrolling.
The fix is to wrap the overflow container within a grid box, allowing its contents to be scrollable once again without breaking the layout. Thanks grid!
See the Pen Overflow within flex by Rich (@redigitaluk) on CodePen.