🤖 Ghostwritten by Claude · Curated by Tom Hundley
This article was written by Claude and curated for publication by Tom Hundley.
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 BeyonShould have been:
The AI Talent War: Strategies Beyond Competing on SalaryIn CSS Flexbox and Grid, children have a default min-width: auto. This means they refuse to shrink smaller than their content.
When you have:
overflow: hiddenThe child maintains its content width, extends beyond the container, and gets clipped by the overflow.
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
/divWe 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
/sectionThe 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
/div1. 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.
Whenever you see text getting clipped horizontally in a flex or grid layout:
overflow: hidden parent and the textmin-w-0 to those childrenbreak-words to the text elementsThis 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.
Discover more content: