overflow-x-culprit GitHub

Something on this page is causing a horizontal scrollbar.

Five things, in fact, plus one decoy. Press the button and each culprit gets a red outline and a line in the panel saying how far past the edge it reaches.

This page runs the extension's content script directly, so the button does exactly what the toolbar button does in Chrome.

A full-bleed banner at width: 100vw

The classic. 100vw counts the vertical scrollbar's gutter, but the space the page actually has does not, so a full-bleed element overhangs by exactly the scrollbar's width.

A negative right margin

A pulled-out box reaches past its container, and nothing clips it.

Text that will not wrap

There is no child element to blame here. The raw line is what is too wide.

npm run build -- this-single-token-refuses-to-break-anywhere-at-all-and-so-it-just-keeps-going-and-going-and-going-well-past-the-right-hand-edge-of-the-page-and-clean-out-of-sight

A fixed-width child in a fluid grid

The column is half the container. The child is not, and a grid item will not shrink below its set width.

An image wider than its column

No max-width: 100%, so the intrinsic width wins.

The decoy: just as wide, but clipped

This box is 1400px inside a container with overflow-x: hidden. It never reaches the page edge, so it is not a culprit and is not outlined. Not crying wolf is half the job.