The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Issue with scrollbar — works in Chrome not in Firefox or Edge

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #274383
    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.)


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

    height:calc(100vh - 14rem);
Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘CSS’ is closed to new topics and replies.