A long email address pushes a flex row wider than the phone screen. How do you fix it?

Add min-w-0 (and usually flex-1) to the text container so it may shrink, then truncate or break the text (truncate, break-all or wrap-anywhere); add shrink-0 to buttons and icons.

The Page That Scrolled Sideways on Phones — Tailwind CSS in Production

Scenario

Example team: a checkout page was designed and tested on laptops. It uses w-[600px] for the summary, a flex row with an order ID and buttons, and shows long coupon codes and email addresses.

What you see in production

On phones the page wobbles sideways; the "Pay" button is partly off-screen. Mobile conversion drops noticeably.

The naive code

<div class="w-[600px]">…</div>
<div class="flex"><p>ORDER-2026-10-22-XJ48273648273648</p><button>Copy</button></div>

Reproduce it

The frame below is limited to a phone width (20rem):

Fixed widths vs fluid layout at phone widthTry it yourself

<div class="grid gap-6 p-4 sm:grid-cols-2">
  <div class="w-80 overflow-x-auto rounded-lg border border-rose-300 p-2">
    <p class="mb-1 text-xs font-semibold text-rose-600">broken</p>
    <div class="w-[480px] rounded bg-gray-100 p-2 text-sm">w-[480px] summary</div>
    <div class="mt-2 flex gap-2 text-sm"><p>ORDER-2026-10-22-XJ48273648273648</p><button class="rounded bg-gray-900 px-2 text-white">Copy</button></div>
  </div>
  <div class="w-80 rounded-lg border border-emerald-300 p-2">
    <p class="mb-1 text-xs font-semibold text-emerald-600">fixed</p>
    <div class="w-full max-w-[480px] rounded bg-gray-100 p-2 text-sm">w-full max-w-[480px] summary</div>
    <div class="mt-2 flex gap-2 text-sm"><p class="min-w-0 flex-1 break-all">ORDER-2026-10-22-XJ48273648273648</p><button class="shrink-0 rounded bg-gray-900 px-2 text-white">Copy</button></div>
  </div>
</div>

Root cause

Three classic causes: fixed widths larger than the viewport, long unbreakable strings (IDs, URLs, emails), and flex/grid children with min-width: auto, which refuse to shrink below their content.

The fix

Use w-full max-w-* instead of fixed widths; mobile first, widen with breakpoints.
Let text break: break-all for IDs, wrap-anywhere / break-words for URLs and emails, or truncate with a copy button.
Add min-w-0 to flex children that contain text, and shrink-0 to icons and buttons.
In grids, use minmax(0,1fr) columns (grid-cols-[minmax(0,1fr)_auto]).

Trade-offs

break-all splits anywhere, which is fine for codes and ugly for words; use the gentlest rule that works.
overflow-x-hidden on <body> hides the symptom and can clip focus rings and sticky elements; fix the cause.

Detect it in production

Automated screenshots at 360px width for key flows; a script that fails when document.documentElement.scrollWidth > innerWidth.
Real-user monitoring segmented by device.

Key points

Fixed widths, long strings and non-shrinking flex children cause sideways scrolling.
w-full max-w-*, min-w-0, shrink-0 and break utilities fix them.
Test at phone width automatically.