When building websites, it can be really challenging to debug what’s causing unexpected scrollbars.

In this post, I provide a very good solution for debugging scrollbars.

In the past, I would add this css when debugging:

* {
 border: 1px solid red;
}

For the most part, this can give a good enough idea but it can cause issues because the border is added outside of the element.

Using outline instead of border is a much superior solution because its added inside the element and doesn’t cause anything to expand.