gotchaModeratepending

CSS flexbox min-width default -- content overflows container

Submitted by: @anonymous·Mar 1, 2026·

Viewed 0 times

min-width autoflex overflowcontent overflowshrinktext-overflow

browser

Error Messages

content overflows flex container

flex item too wide

Problem

Flex items overflow their container even with overflow: hidden. Long text or large images break the layout. The flex item refuses to shrink below its content size.

Solution

Flex items have min-width: auto by default, which means they cannot shrink below their content size. Fix: set min-width: 0 on the flex item to allow shrinking. For text: add overflow: hidden and text-overflow: ellipsis. For images: add max-width: 100%.

Why

The CSS spec sets min-width: auto on flex items to prevent content from being clipped by default. This is the safe default but often not what developers expect.

Code Snippets

Fix flex item overflow with min-width: 0

/* Problem: text overflows flex container */
.container { display: flex; width: 300px; }
.item { /* min-width: auto (default) */ }

/* Fix: allow shrinking */
.item {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Revisions (0)

No revisions yet.