Fix Flexbox Overflow With min-width: 0

A flex item can have flex: 1 and still push outside its container. In a horizontal flex layout, min-width: 0 lets it shrink below the content-based automatic minimum that may be holding it open.

That fixes the item’s minimum width. Its contents still need a policy for wrapping, scrolling, or truncation; allowing the box to shrink does not decide what happens to a long line inside it.

<label><input id="fix" type="checkbox"> Apply min-width: 0</label>
<div class="stage"><div class="layout"><aside>Sidebar</aside><main><pre>A_long_preformatted_line_that_should_scroll_inside_the_content_column_instead_of_widening_the_layout</pre></main></div></div>
<p class="note">Without the fix, scroll the outer frame. With the fix, scroll the code inside its column.</p>

button, select { padding: .35rem .6rem; border: 1px solid var(--clg); background: var(--cw); color: var(--cb); }
input[type="range"] { width: min(100%, 18rem); vertical-align: middle; }
h2, h3 { font-size: 1rem; }
.note { color: var(--clg); }

.stage { overflow: auto; border: 1px solid var(--clg); margin-top: 1rem; }
.layout { gap: .75rem; padding: .75rem; }
aside { padding: .5rem; background: var(--cg); }
main { border: 1px solid var(--cl); }
pre { overflow-x: auto; margin: 0; padding: 1rem; }
.layout { display: flex; }
aside { flex: 0 0 5rem; }
main { flex: 1; }
.layout.fixed main { min-width: 0; }

document.querySelector('#fix').addEventListener('change', event => {
  document.querySelector('.layout').classList.toggle('fixed', event.target.checked);
});

Let min-width: 0 remove the content minimum

A sidebar beside a flexible content area is a common example:

<div class="layout">
  <aside class="sidebar">Sidebar</aside>
  <main class="content">
    <pre>A_preformatted_line_that_can_be_wider_than_the_available_content_column</pre>
  </main>
</div>

.layout {
  display: flex;
  gap: 1rem;
}

.sidebar {
  flex: 0 0 16rem;
}

.content {
  flex: 1;
  min-width: 0;
}

.content pre {
  overflow-x: auto;
}

The Flexbox automatic minimum-size rules explain why the extra declaration matters. A flex item’s automatic minimum in the main axis can depend on its contents when its overflow value is non-scrollable.

The sidebar here deliberately keeps its basis. The main content can shrink, and the preformatted line can scroll inside it. Neither rule alone describes the whole layout.

Flex shrinking still respects a minimum

The min-width reference describes the automatic minimum for flex and grid items. A long unbroken value can give that minimum a much larger width than a normal paragraph.

Increasing flex-shrink does not remove the minimum. The flex sizing algorithm still has to respect the item’s size constraints.

With min-width: 0, the content no longer establishes that lower bound. This is a useful distinction when the surrounding flex layout looks correct but one child refuses to fit.

Give a truncated title a constrained parent

An ellipsis also needs the containing flex item to shrink:

<div class="row">
  <span class="avatar" aria-hidden="true">RV</span>
  <div class="text">
    <strong>A very long title that should truncate within the available row</strong>
  </div>
</div>

.row {
  display: flex;
  gap: 0.75rem;
}

.avatar {
  flex: 0 0 2rem;
}

.text {
  flex: 1;
  min-width: 0;
}

.text strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

The text-overflow rules require an overflow situation for the ellipsis to matter. If the parent simply expands to fit the title, there is nothing to truncate at the intended width.

The example uses initials rather than an external image, so no missing avatar file is needed to see the sizing pattern. A real avatar can occupy the same fixed slot.

Decide what the overflowing content should do

A paragraph may need overflow-wrap: anywhere. A code block may need horizontal scrolling. A compact title may need the deliberate truncation shown above.

Those are content decisions. Adding min-width: 0 to the parent permits them to work inside the available width, but it does not wrap an unbreakable string on its own.

Long URLs and filenames make the distinction easier to see. Check a value without convenient breaking opportunities, not only a sentence that already wraps naturally.

Hidden overflow changes more than the minimum

overflow: hidden can also change the automatic minimum-size result for a flex item. It additionally clips overflow, which may hide content or decoration that should remain available.

The minimum-size specification ties this behaviour to the computed overflow value. It is not evidence that clipping is required whenever a flex item needs to shrink.

For a box that should shrink while its code block scrolls, an explicit minimum on the flex item expresses the narrower requirement. Clipping belongs where hiding overflow is actually intended.

Check the main axis and the ancestors

For horizontal writing, min-inline-size: 0 is the logical equivalent of the width rule. A column flex layout can instead encounter a content-based minimum height; the relevant dimension depends on the main axis.

Nested flex layouts can also have more than one restrictive ancestor. Fixing the inner text wrapper does not remove a minimum on an outer flex item.

Avoid turning the fix into a universal reset. Automatic minimums can protect useful content, and the appropriate target is the item that needs permission to shrink.

The sidebar still needs to fit

The first example has a fixed 16rem sidebar plus a gap. A narrow viewport cannot make that fixed part disappear merely because the main column has a zero minimum.

Use a breakpoint or a different layout when the sidebar itself no longer fits. Grid’s related minmax(0, 1fr) pattern addresses a similar minimum-sizing issue, but neither technique replaces a responsive layout decision.

← Back to all articles