How to fix CSS horizontal overflow

Unwanted CSS overflow usually appears as horizontal page scroll, clipped cards, or content that pushes a component wider than its container. The repair starts by proving which box is wider than the viewport, then changing the rule that prevents the content from shrinking or wrapping.

Modern layouts can hide the cause because a flex or grid child keeps an automatic minimum width, a long URL has no line-break opportunity, or a media element keeps a fixed inline size. Adding overflow-x: hidden to the page can hide the scrollbar, but it can also clip focus outlines, menus, and real content while the oversized element remains unchanged.

Use the browser's responsive viewport and DevTools at the smallest width that reproduces the problem. The snippets target a card with a fixed icon and a long release URL; replace the selectors with the component that overflows in the page being debugged.

1. Reproduce the overflow at the narrow viewport where the page scrolls sideways.

   Use the same route, state, and content that triggered the issue; shorter labels or placeholder text can hide the element that actually overflows.

2. Confirm that the document is wider than the viewport from the browser console.

   > document.documentElement.scrollWidth > document.documentElement.clientWidth
   true

   A true result means at least one element extends past the root inline size. If the expression returns false, inspect the specific scroll container instead of the document root.

3. Select the overflowing component in DevTools and compare the highlighted box with the viewport edge.

   Check fixed widths, width: 100vw inside a padded wrapper, translated off-canvas elements, unbreakable text, and flex or grid children whose minimum size follows their content.

4. Replace viewport or fixed inline sizes on normal content with container-limited sizing.

   .content-panel {
     inline-size: 100%;
     max-inline-size: 100%;
   }

   Do not use overflow-x: hidden on html or body as the first fix; it can hide accessible focus rings, menus, and content that still sits outside the layout.

5. Let the flex or grid child that contains the long content shrink inside the row.

   .card__body {
     min-inline-size: 0;
   }

   For grid columns that use fractional space, define the flexible track as minmax(0, 1fr) so the track can shrink below the content's intrinsic width.

   Related: How to create a two-column CSS grid layout

6. Allow long strings such as URLs, filenames, IDs, and tokens to wrap before they force the component wider.

   .card__url {
     overflow-wrap: anywhere;
   }

   Apply this to the text element that contains the unbreakable value rather than to the whole page, so normal prose keeps its usual word spacing.

7. Retest the document root at the same viewport width.

   > document.documentElement.scrollWidth === document.documentElement.clientWidth
   true

   If the check still returns false, repeat the DevTools selection pass on the next widest box instead of adding a global clipping rule.