# Min-Width for Truncation

**MUST** · **ID:** `layout-min-width-truncation` · **Category:** layout
**Source:** [Vercel](https://github.com/vercel-labs/agent-skills/blob/main/skills/web-design-guidelines/SKILL.md)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/layout-min-width-truncation

> MUST: Add `min-w-0` (`min-width: 0`) to any flex child that must truncate — flex items default to `min-width: auto` and refuse to shrink below their content, so `text-overflow: ellipsis` never has an overflow to clip. Grid children need `min-w-0` or `minmax(0, 1fr)`.

Add min-w-0 to flex children so text can actually truncate instead of overflowing

A flex item defaults to min-width: auto, which refuses to shrink below its content's min-content size. A long unbroken filename or URL therefore keeps the item wide, text-overflow: ellipsis never has an overflow to clip, and the row blows out — pushing siblings like a trailing button outside the container. Setting min-width: 0 (min-w-0) on the shrinking child restores the shrink and makes truncate work. The same applies to grid children via min-w-0 or minmax(0, 1fr).

## Rule snippet

```tsx
<div class="flex items-center gap-2">
  <span class="min-w-0 flex-1 truncate">{longFileName}</span>
  <button class="shrink-0">Open</button>
</div>
```

## Bad — do not do this

`layout-min-width-truncation-bad`

```tsx
export function MinWidthTruncationBad() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-3 overflow-hidden">
        {/* The middle column is a flex child with the default min-width: auto.
            It refuses to shrink below its content, so `truncate` never kicks in. */}
        <div className="flex items-center gap-3">
          <div className="shrink-0 size-9 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
            AK
          </div>
          <div className="flex-1">
            <p className="truncate text-sm font-medium text-foreground">
              quarterly-financial-report-final-v7-approved.pdf
            </p>
            <p className="truncate text-xs text-muted-foreground">
              Shared by Alexandra Kowalski &middot; 2.4 MB
            </p>
          </div>
          <button
            type="button"
            className="shrink-0 px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground"
          >
            Download
          </button>
        </div>
      </div>
      <p className="text-xs text-error mt-4">
        No min-w-0: the flex child will not shrink, truncate does nothing, and the row blows out
        &mdash; the Download button is pushed outside the card.
      </p>
    </div>
  );
}
```

## Good — do this

`layout-min-width-truncation-good`

```tsx
export function MinWidthTruncationGood() {
  return (
    <div className="w-full max-w-sm">
      <div className="bg-card border border-border rounded-lg p-3 overflow-hidden">
        {/* min-w-0 overrides min-width: auto, letting the flex child shrink
            below its content so text-overflow: ellipsis can finally apply. */}
        <div className="flex items-center gap-3">
          <div className="shrink-0 size-9 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
            AK
          </div>
          <div className="min-w-0 flex-1">
            <p className="truncate text-sm font-medium text-foreground">
              quarterly-financial-report-final-v7-approved.pdf
            </p>
            <p className="truncate text-xs text-muted-foreground">
              Shared by Alexandra Kowalski &middot; 2.4 MB
            </p>
          </div>
          <button
            type="button"
            className="shrink-0 px-3 py-1.5 text-sm rounded-md bg-primary text-primary-foreground hover:bg-primary/90 transition-colors"
          >
            Download
          </button>
        </div>
      </div>
      <p className="text-xs text-success mt-4">
        min-w-0 on the flex child: the filename ellipsizes and the Download button stays inside the
        card at every width.
      </p>
    </div>
  );
}
```

## References

- [MDN: min-width](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/min-width)
- [MDN: text-overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-overflow)