Issue with scrollbar — works in Chrome not in Firefox or Edge

[Rodd Harris]

I have a page that Ive laid out using flexbox. It has a header, a middle and a footer and takes up the whole browser window.

The middle content will wrap as the browser window is resized and may cause the content to expand. The middle container has overflow-y: auto applied show the vertical scrollbar should appear if the content does expand beyond its borders.

This all works in Chrome. However, in Edge and Firefox, the expanding content pushes the footer off the screen and the vertical scrollbar is applied to the entire page instead of just the middle container.

You can see an example here. Do the following in both Chrome and Firefox/Edge to see the difference.

1. Resize the window horizontally and you should see the red box wrap beneath the blue box.
2. Resize the window vertically and you should see the vertical scrollbar appear within the green box (in Chrome) or over the whole “page” (Firefox/Edge).

How do I get the scrollbar behavior to be consistent across all 3 browsers? (Preferably consistent with how Chrome is handling things.)

[Pogany]

Hi,
You may need to add a hight for the .scrollable, for example:

height:calc(100vh - 14rem);

[Author]

Posts