Solution to small horizontal scroll when using 100vw - known browser bug

Just adding this note in case anyone is searching to troubleshooting a problem when they have a short horizontal scrollbar on the browser in their published site that they can’t get rid of when using 100vw.

There are some posts in the forum on this but they are closed so I can’t add to them. I have just spent two hours trying to figure this out so hopefully this explanation will save someone some time!

This is a known bug in browsers, caniuse states:

“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.
Can I use... Support tables for HTML5, CSS3, etc

The fix is not to set overflow as hidden OR to set max width to 100%.

You can also set your element to 100VH with MAX100% if it has a parent element that has a width of 100% (or auto if the parent is not inheriting widths from another element that would make it smaller).

The other forum posts suggest one or the other but don’t explain why so hopefully this is of help to someone else trying to fix it.

Note that setting overflow to hidden can cause problems with some JS for example position-sticky where overflow needs to be set to none.

4 Likes

After hours of ripping my site apart and searching for solutions, this helped so much. Thank you!

I even created an account just to let you know that this is still a life-saver in 2023!

Thank you, a lot!!