Flexbox Wrapping and Overflow

Why Flex Items Overflow

Flex items have an implicit minimum width: they will not shrink smaller than their content. This is the single most common cause of flex overflow.

.container {
  display: flex;
  gap: 16px;
}

.item {
  /* Contains a long URL — will not shrink below content width */
}

Even though flex-shrink defaults to 1, the browser applies min-width: auto to flex items. This prevents items from shrinking below their content size. Long unbroken text, wide images, or fixed-width elements push items past the container edge.

The Fix: Override min-width

.item {
  min-width: 0; /* Allow shrinking below content width */
  overflow: hidden;
  text-overflow: ellipsis;
}

Setting min-width: 0 removes the implicit minimum. Now flex-shrink works as expected — the item compresses to fit. Combine it with overflow: hidden and text-overflow: ellipsis to handle long text gracefully.

flex-wrap: wrap — The Basics

By default, flex items stay on one line (flex-wrap: nowrap). Enable wrapping with:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

Wrapping items will flow to the next line whenever they exceed the container width. But wrapping introduces its own challenges.

The Gap Problem with Wrapped Rows

When items wrap, gap applies between all items — both horizontally and vertically. This means the last row's alignment depends on how many items it contains.

[Item 1] [Item 2] [Item 3]      ← 3 items, gap between each
[Item 4] [Item 5]               ← 2 items, left-aligned

Items are not justified to match the row above. If you want a grid-like alignment, CSS Grid is the better tool.

flex-basis and Wrapping Interaction

flex-basis sets the initial size before growing or shrinking. Combined with flex-wrap: wrap, it controls when items wrap:

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.item {
  flex: 1 1 280px; /* grow, shrink, base 280px */
}

Items grow to fill space (flex-grow: 1) but wrap when the container cannot fit another 280px item.

The flex-shrink: 0 Trap

Setting flex-shrink: 0 prevents items from compressing. Combined with nowrap, items overflow:

.container {
  display: flex;
  /* nowrap is default */
}

.item {
  flex-shrink: 0; /* Items refuse to shrink */
  width: 300px;   /* 4 items × 300px = 1200px — overflows a 1000px container */
}

Use flex-shrink: 0 only when items have a genuine minimum size — icons, avatars, fixed-width controls. For fluid content, let flex-shrink do its job.

Horizontal Scrolling Containers

For navigation bars and tag lists, horizontal scrolling is intentional:

.scroll-nav {
  display: flex;
  overflow-x: auto;
  gap: 8px;
  scrollbar-width: thin;
}

.scroll-nav > * {
  flex-shrink: 0; /* Prevent items from compressing */
}

Here, flex-shrink: 0 is correct — you want items at their natural width, with scrolling to handle overflow.

Nested Flex Containers and Overflow

Overflow bugs multiply in nested flex layouts:

.outer {
  display: flex;
}

.sidebar {
  width: 250px;
  flex-shrink: 0;
}

.content {
  flex: 1;
  min-width: 0; /* Critical — prevents inner content from pushing outer */
  display: flex;
  flex-wrap: wrap;
}

Without min-width: 0 on .content, its implicit minimum width (from child content) prevents the flex item from shrinking, pushing the sidebar off-screen.

Rule: Every flex item that contains text or nested flex containers should have min-width: 0 (or min-height: 0 for column direction).

Common Overflow Patterns and Fixes

Key Takeaways

• min-width: auto is the default reason flex items overflow — override with min-width: 0
• flex-wrap: wrap lets items reflow to the next line but does not justify rows
• flex-shrink: 0 prevents compression but causes overflow with nowrap
• Nested flex containers need min-width: 0 on the outer item to prevent child content from expanding the parent
• Use horizontal scrolling for intentional overflow in nav bars and tag lists
• For grid-like layouts with wrapping, CSS Grid is more predictable than flex-wrap

Try It Yourself

Build and test flex layouts with wrapping and overflow using our Flexbox Generator. Adjust flex-wrap, flex-basis, and gap — see the results in real time.