Understand the idea

When a narrow page slides sideways, an element is wider than the space available to it. Start with the first visible edge that crosses its container.

Fixed widths, unbroken text and flex or grid items that will not shrink are common causes. Constrain media, allow text to wrap where appropriate, and use min-width: 0 on a flex or grid child when its minimum size is the obstacle.

Read the example

Apply these rules to a flex row containing a .content child, an image, a .long-address paragraph and a pre block.

CSS · EXAMPLE
.row { display: flex; gap: 1rem; }
.content { min-width: 0; }
img { max-width: 100%; height: auto; }
.long-address { overflow-wrap: anywhere; }
pre { max-width: 100%; overflow-x: auto; }

A useful investigation order

  1. Narrow the viewport until the problem appears.
  2. Inspect the first overflowing element and its parent.
  3. Check fixed width, padding, borders and minimum size.
  4. Temporarily disable one declaration at a time.
  5. Verify the fix with enlarged text and longer content.

Scrolling can be intentional

A code sample should retain its indentation. Letting that sample scroll inside its own boundary is often preferable to forcing the entire page to scroll. Keep the scroll area usable with a keyboard.

Practise: repair an oversized card

A small mistake, explained

What goes wrong

Putting overflow-x: hidden on the whole page can conceal text or controls without correcting their layout.

How to fix it. Inspect the element’s width and minimum width. Use a local scroll area for content such as code that genuinely needs extra space.

Try it yourself

Create a narrow flex row with a long URL. Compare wrapping with clipping, then check that every character can still be reached.

Further reading

MDN — Find the source of horizontal overflow (new tab)

Original explanation and example prepared for HTML code FYI with AI assistance. Test the code in your own context. How these guides are made.