diagnostic · one of 29free, no counter
Overflow
Why is my page scrolling sideways?
Horizontal overflow is caused by one element and hidden by all the others. The usual hunt is to set `outline: 1px solid red` on everything and scroll, which finds the symptom rather than the source. This walks every element, measures how far past the edge each one reaches, and ranks them.
Reach itPress ⌘+K on any tab and type overflow.Ctrl+Kon Windows and Linux
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome buildin the panel · free, no counter
What this actually is
everything that reaches past the viewport edge, and whyWhen a page scrolls sideways on a phone and nothing looks wrong at desktop width. Run it at the width where the problem appears - the reading is of the layout as it is now, not of a simulated one.
What actually causes sideways scroll
the five the panel attributes most- width / min-width
- a fixed pixel width inside a narrower parent - the most common by a distance
- margin-left / right
- a negative margin pulling content past the edge, usually a grid gutter hack
- position: absolute
- positioned against a containing block wider than the viewport
- white-space: nowrap
- an unbreakable string: a URL, a hash, a long word in a table cell
- transform: translateX
- the box is where it was, the paint is not - and the scrollbar follows the paint
Asked about this diagnostic
4 of themWhy does it find nothing when the page is clearly scrolling?
Because the overhang is inside an iframe or a shadow root that the walk did not enter. Same-origin frames are walked; a cross-origin one cannot be, and the row for it says so instead of reporting zero.
Should I fix the element it names or its parent?
The row says which. When the element overflows itself the fix is on the element; when a child pushes it, the parent is named and the child is listed under it - putting `overflow-x: hidden` on the parent in that case hides the bug rather than fixing it.
Does `overflow-x: hidden` on the body count as fixed?
It stops the scrollbar and keeps the content off-screen, which on a phone means a paragraph nobody can reach. The diagnostic keeps reporting the element for that reason.
Do I need to resize the window first?
Yes. This reads the layout as it is right now, not a simulation of another width - run it at the width where the problem appears, or use the Viewport tool to open that width in a real frame and run it there.
TWO BUILDS9 browsers
Chromelisting in reviewFirefoxlisting in reviewBravelisting in reviewOperalisting in reviewEdgelisting in review4 moreChromium browsers: Arc, Vivaldi, Chromium, Opera GXthe Chrome build63 of these · no host permissions · three free audits