Min-Width for 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
<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
Good
Why it matters
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).
References