Find Unintended CSS Overflow

Ever coded an HTML static design site? I’m sure you’ve encountered problems where you’ve just installed some CSS framework then coded some additional CSS files. Everything seems fine in the editor, the classes look right, the nesting is clean. After you’ve finished the code, you run it on a browser then TADAHHH!

You can only find truth with logic if you have already found truth without it.

~ Gilbert Keith Chesterton.

There were overflows, horizontal and vertical scrollbars everywhere. 😁

It’s a bit cumbersome to find where those scrollbars or overflows originated, so that’s what this article is for. In order to find those overflows, here’s a one liner that you can directly paste on your web developer console, or just press F12 then the console tab. The console tab is the place where you look at JavaScript logs (console.log), anyways, just copy this then analyze it first before pasting it on your console:

javascript:void(function () {var docWidth = document.documentElement.offsetWidth;[].forEach.call(document.querySelectorAll('*'), function (el) {if (el.offsetWidth > docWidth) console.log(el)})})();

Here is the full script which had been beautified for readability:

var docWidth =  document.documentElement.offsetWidth;
[].forEach.call(document.querySelectorAll("*"), function(el) {
  if (el.offsetWidth > docWidth) {
    console.log(el);
  }
});

🔍 How It Works

If you analyze the code carefully, you’ll see that on the first instruction it gets the current document offset width, which is basically the width of the whole page viewport. Then it loops over all selectors, which are classes and ids, and if it finds an element that is wider than the document itself, it prints that element’s attributes and location in the console.

That is the trick: anything wider than the document is a suspect, because it literally has nowhere to go but sideways, pushing your layout off the edge and creating the scrollbar you have been hunting for. Once the console shows you the guilty element, right click it, inspect it, and fix whatever width, padding, or margin pushed it over the limit.

That’s all guys!

🧠 Final Thoughts

Overflow hunting used to cost me an embarrassing amount of time, and this one liner turned it into a ten second job. Keep it in your snippets, and the next time a framework decides to fight your CSS, you will know exactly which element to blame. Let me know in the comments if you have questions or queries, you can also DM me directly.

Also follow me for similar article, tips, and tricks ❤.