[Splashsky]

Howdy! I couldn't find any solid answer on Google, so I'm coming here to ask about the browser scrollbar. In my current design project, when the content of the page goes beyond the vertical viewport, the right-hand scrollbar appears. Expected. Don't want to remove it. However, for some reason my container - which uses 100vw - appears to continue with the same width it had before the scrollbar appeared, causing a portion of the padding to fall behind that scrollbar which makes the bottom horizontal scrollbar appear. This is ugly, unappealing and is annoying on a mobile screen. How do I get my container to account for the slightly smaller width dynamically?

[Martyr2]

This is a known bug. See https://caniuse.com/...=viewport-units

Quote

Currently all browsers but Firefox incorrectly consider 100vw to be the entire page width, including vertical scroll bar, which can cause a horizontal scroll bar when overflow: auto is set.

One thing you can try is to add max-width: 100%; to your container and see if that helps.

[Splashsky]

Martyr2, on 20 August 2019 - 05:19 PM, said:

One thing you can try is to add max-width: 100%; to your container and see if that helps.

Worked perfectly. Thanks for saving the rest of my hair.