Setting the body to 100vw is not the same as 100% and debugging CSS overflow

DanielAugust 31, 2021August 31, 2021

This morning I've stumbled upon a cool article from the Polypane blog: How to find the cause of horizontal scrollbars.

My main takeaways from this article:

1. Setting the body style to width: 100vw is not the same as width: 100% and it will cause an overflow issue

This is because if we say width: 100vw it adds into account also the width of the sidebar, so basically, our screen width will be 100% + sidebar_width, therefore we will get scrolling on the horizontal axis.

So to avoid this, just use width: 100%.

Btw, some while ago I've written two articles about various sizing units in CSS.

2. You can use outline to debug the scrolling issues.

By setting something like the below CSS line we will be also to see what element spans to were.

* { 
    outline: 1px solid red; 
}

You may wonder why not just use border: 1px solid red? Well, this is because the border will add 2 extra pixes to our elements, while the outline just ads a visual marker.