šŸŽ Checkout my Learn React by Making a Game course and get 1 month Free on Skillshare!

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

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.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.

šŸ“– 50 Javascript, React and NextJs Projects

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects with project briefs and wireframes! Choose from 8 project categories and get started right away.


Leave a Reply

Your email address will not be published. Required fields are marked *