The min-w-0 Fix: Flexbox Text Cutoff on Mobile

🤖 Ghostwritten by Claude · Curated by Tom Hundley

This article was written by Claude and curated for publication by Tom Hundley.

---

The Problem

You build a beautiful card component. It looks perfect on desktop. Then you check mobile and... the text is cut off mid-word. No ellipsis, no wrapping—just brutally clipped at the edge.

The AI Talent War: Strategies Beyon

Should have been:

The AI Talent War: Strategies Beyond Competing on Salary

Why This Happens

In CSS Flexbox and Grid, children have a default min-width: auto. This means they refuse to shrink smaller than their content.

When you have:

• A flex/grid container with overflow: hidden
• A child element containing text
• A viewport narrower than the text content

The child maintains its content width, extends beyond the container, and gets clipped by the overflow.

The Fix

Add min-w-0 (Tailwind) or min-width: 0 (CSS) to the flex/grid children:

// Before - text gets clipped
div className=flex
  div className=h-full
    h3 className=line-clamp-2{title}/h3
  /div
/div

// After - text wraps properly
div className=flex
  div className=h-full min-w-0
    h3 className=line-clamp-2{title}/h3
  /div
/div

Real-World Example

We hit this exact issue on our blogs recent posts slider. The carousel card looked perfect on desktop but text was getting cut off on iPhone 12 Pro Max (428px viewport).

The component structure was:

section className=overflow-hidden {/* Needed for animations */}
  div className=grid lg:grid-cols-[1fr_320px]
    div className=relative min-h-[280px] {/* Missing min-w-0! */}
      motion.div className=h-full {/* Missing min-w-0! */}
        Link className=h-full {/* Missing min-w-0! */}
          h3 className=line-clamp-2{title}/h3
        /Link
      /motion.div
    /div
  /div
/section

The fix required adding min-w-0 to multiple levels:

div className=relative min-h-[280px] min-w-0
  motion.div className=h-full w-full min-w-0
    Link className=h-full w-full min-w-0 overflow-hidden
      h3 className=line-clamp-2 break-words{title}/h3
    /Link
  /motion.div
/div

Debugging Tips

1. Use Playwright for mobile testing

Dont just resize your browser. Actual device viewports behave differently. We use Claude Code to quickly spin up testing scripts like this:

const { chromium } = require(playwright);

const devices = [
  { name: iPhone-12-Pro-Max, width: 428, height: 926 },
  { name: iPhone-SE, width: 375, height: 667 },
];

for (const device of devices) {
  const context = await browser.newContext({
    viewport: { width: device.width, height: device.height },
    deviceScaleFactor: 2,
  });
  // Take screenshots...
}

2. Check your overflow

If a parent has overflow: hidden, thats where clipping occurs. The fix goes on the children, not the parent.

3. Add min-w-0 at each level

In deeply nested flex/grid structures, you may need it on multiple ancestors.

Key Takeaways

Whenever you see text getting clipped horizontally in a flex or grid layout:

1. Find the flex/grid children between the overflow: hidden parent and the text
2. Add min-w-0 to those children
3. Optionally add break-words to the text elements

This is one of those CSS gotchas thats obvious once you know it, but can waste hours if you dont.

---

Found this useful? We document fixes like this as we build production systems. If your team is wrestling with frontend issues alongside AI integration challenges, lets talk.