Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum of which element was adding a horizontal/vertical scroll to my page/elements. Debugging CSS scroll is a pain that I have felt too many times now and I always fall back to this one line that helps me.

The one line of CSS that helps me in debugging CSS scroll

* {
  outline: 1px solid red;
}
- Advertisement -

There are different ways to add this line, adding it to the source code directly and removing it. But I usually add it to Chrome dev tools directly so that I don’t have to remove it later.

The line adds a red outline to all elements on the page (* is the global selector). And using that, I am usually able to figure out which element is spilling out of the viewport and fix it.

Another thing to note is that outline is better than border in this case. Border widths can affect the layout of the elements. Depending on the box-sizing property, the width of the element would be different. content-box adds the width of the border to the calculated element width and border-box includes it in the calculation. That can make debugging CSS scroll a bit harder since it might affect those elements widths and heights.

Recent Articles

How to sort a Set in JavaScript

ES6 introduced the set data structure in JavaScript. But sets are not ordered abstract data structures. So there is no .sort() property...

Debugging CSS scroll using one simple style

I have been doing a lot of complicated front-end work off lately and that always brings me back to the class conundrum...

CSS :has a parent selector now

CSS now includes a :has selector that allows us to apply styles on the basis of what is happening inside an element....

How to fix “invalid active developer path” after MacOS update

If you are here, then you are getting an "invalid active developer path" error on running commands in the terminal after a...

Getting the value of an input element as a number without parseInt

Every once in a while, you come across something and you think, how did I not know this earlier? valueAsNumber is that thing...

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.

Hi there! Want some more knowledge?

Think that the knowledge shared is helpful? You might want to give our mailing list a try. We'll send you 2-4 emails a month, right when new posts come out.