diagnostic · one of 36 free, 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 it Press ⌘ + K on any tab and type overflow. Ctrl + K on Windows and Linux
in 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.
how to use overflow
- Set the window to the width where the page scrolls sideways.
- Open Overflow. The reading is of the layout as it is now, not as it would be at another width.
- Read the top row: elements are ranked by how far past the edge each one reaches.
- Use the overlay to outline the offender before you touch the stylesheet.
written about at length
70 of these · no host permissions · three free audits