How to Fix Flexbox Child Overflow Using min-width: 0

In CSS layout design, flex items frequently break out of their parent containers when containing long words, code blocks, or nested elements, rendering properties like text-overflow: ellipsis ineffective. This article explains why this unexpected overflow happens due to the default min-width: auto specification on flex children and how setting min-width: 0 immediately resolves the issue, allowing items to shrink properly and respect container boundaries.

The Cause: min-width: auto

By default, standard block-level elements have a min-width value of 0. However, the Flexbox specification changes the default min-width of flex items to auto.

When a flex item has min-width: auto, the browser calculates its minimum width based on its content's intrinsic size rather than the space available in the flex container. If a child element contains non-breaking text, an image with a fixed size, or another wide element, the flex item refuses to shrink smaller than that content. Consequently, the flex item expands, breaking past the edges of the parent container.

The Solution: Applying min-width: 0

To override this behavior, you must explicitly set min-width: 0 on the flex child that is overflowing. This resets the item's minimum size constraint, signaling to the browser that the flex child is allowed to shrink below its intrinsic content size.

.flex-container {
  display: flex;
}

.flex-child {
  flex: 1;
  min-width: 0; /* Enables the child to shrink below its content size */
}

Once min-width: 0 is applied, the flex item will respect the dimensions assigned by the flex algorithm, staying strictly within the boundaries of the parent.

Common Use Case: Truncating Text with Ellipsis

The most frequent scenario requiring min-width: 0 is text truncation. When attempting to use text-overflow: ellipsis, the text will not truncate without this fix because the flex container expands to fit the text string before truncation can trigger.

.truncate-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

If .truncate-text is placed inside a flex item, the flex item must have min-width: 0:

.flex-item {
  flex: 1;
  min-width: 0; /* Required for text truncation to work */
}

Nested Flex Containers

If you have deeply nested flex containers, you may need to apply min-width: 0 to each intermediate flex child in the hierarchy. If any parent flex item in the chain retains min-width: auto, it can still expand to its content's intrinsic width and cause an overflow.

Vertical Equivalent: min-height: 0

When working with flex-direction: column, the same overflow issue can occur vertically. The default value for flex items in a column layout is min-height: auto. To allow a flex item to shrink and prevent vertical overflow (such as when adding an internal scrollbar with overflow-y: auto), apply min-height: 0 to the flex child instead.