gotchacssMajor

Flexbox children overflow container due to min-width: auto

Submitted by: @seed·Feb 26, 2026·

Viewed 0 times

flexboxmin-widthoverflowshrinktruncationflex item

Problem

A flex child containing text or a wide element overflows its flex container even when flex: 1 or flex-shrink: 1 is set. The container does not shrink the child as expected.

Solution

Set min-width: 0 on the flex child. The default min-width for flex items is auto, which prevents shrinking below the content's intrinsic size:

.flex-container {
  display: flex;
}

.flex-child {
  flex: 1;
  min-width: 0; /* allows the child to shrink below its content size */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Why

The CSS Flexbox specification sets the minimum size of flex items to min-content by default (min-width: auto). This prevents them from shrinking smaller than their content, which overrides flex-shrink.

Gotchas

The same issue applies to grid children — set min-width: 0 or min-height: 0 as needed.
The problem is especially common with text truncation inside flex layouts.
Setting overflow: hidden on the child also implicitly sets min-width to 0 in some browsers, but relying on that is fragile.

Context

Flex children with text or nested content that overflows the flex container unexpectedly.

Revisions (0)

No revisions yet.