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 *

Home Screencasts Best of Newsletter Search X

📖 50 Javascript, React and NextJs Projects

Hi friend! Before you go, just wanted to let you know about the 50 Javascript, React and NextJs Projects FREE ebook.

One of the best ways to learn is by doing the work. Choose from 8 project categories and get started right away:

  • Business & Real-World
  • Games & Puzzles
  • Fun & Interesting
  • Tools & Libraries
  • Personal & Portfolio
  • Project Add-Ons
  • Productivity
  • Clones

Learn by doing with this FREE ebook! Not sure what to build? Dive in with 50 projects complete with project briefs and wireframes!

Keep building and level up! Get all projects as an ebook right to your inbox!

X