Your Flex Child Won't Shrink, and overflow: hidden Isn't the Fix (It's min-width: 0)

You build a dashboard. Sidebar on the left, content on the right, a table or a code block inside. It looks perfect with your sample data.

Then a user pastes a long URL into a field, and the whole page grows a horizontal scrollbar. The sidebar gets squeezed, the layout breaks, and you start adding overflow: hidden to everything until the symptoms go away.

There is a one-line fix, and it is not overflow: hidden.

The Layout That Breaks

<div class="layout">
  <aside class="sidebar">Menu</aside>
  <main class="content">
    <pre>https://example.com/a-very-long-url-with-no-break-points-in-it-at-all-1234567890</pre>
  </main>
</div>

.layout {
  display: flex;
}
.sidebar {
  width: 240px;
  flex-shrink: 0;
}
.content {
  flex: 1;
}

.content is told to take the remaining space with flex: 1. Nobody told it to stay inside that space, and that is the entire problem.

Why It Happens

Flex items and grid items have a default of min-width: auto. For a flex item, auto means:

Do not shrink narrower than the smallest size your content can be.

For a paragraph of normal words, the smallest size is the longest single word, because the line can wrap between words. For a long URL, a <pre> block, a wide table or an image, there is nowhere to wrap, so the smallest size is the full width of the content.

So the browser is not ignoring your layout. It is obeying a rule you never knew existed: the item refuses to shrink below its content, and the overflow spills into the page.

Why overflow: hidden Looks Like a Fix (Sometimes)

Setting overflow to anything other than visible changes how min-width: auto is calculated. The automatic minimum becomes 0 for that item. That is why overflow: hidden on the right element makes the bug vanish.

It works by accident, and it has a cost: it clips content, can cut off focus outlines and dropdowns, and does nothing useful if you put it on the wrong element. Fixing the cause is cleaner.

Fix 1: min-width: 0 on the Flex Child

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

You are telling the item that it is allowed to shrink below its content. Now .content stays inside its space, and the long URL can be scrolled, wrapped or cut off by something you control:

.content pre {
  overflow-x: auto;
}

In Tailwind, the utility is min-w-0:

<main class="flex-1 min-w-0">
  <pre class="overflow-x-auto">...</pre>
</main>

Fix 2: Grid's 1fr Has the Same Trap

.layout {
  display: grid;
  grid-template-columns: 240px 1fr;
}

1fr is not "one equal share, and no more". It is shorthand for minmax(auto, 1fr), so the column cannot get narrower than its content. The same long URL stretches the column and the page.

.layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
}

minmax(0, 1fr) allows the column to shrink to nothing if it has to. A useful side note for Tailwind users: grid-cols-2 and its siblings already compile to repeat(2, minmax(0, 1fr)), which is why many people never meet this bug in the grid, and then meet it as soon as they write a custom template column.

Fix 3: Truncating Text With an Ellipsis Inside Flex

This one catches almost everybody:

.row {
  display: flex;
  gap: 8px;
}
.title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

It does not truncate, because the flex item sizes itself to the text. Add min-width: 0 to .title and the ellipsis appears. In Tailwind, truncate min-w-0 on the same element does it.

Fix 4: Long Words Need the Right overflow-wrap

For user-generated text such as comments, names and pasted links, allow breaking inside a word:

.comment {
  overflow-wrap: anywhere;
}

overflow-wrap: break-word looks equivalent, but it does not change the item's minimum size calculation, so inside a flex or grid item it can still leave the layout stretched. anywhere does take the break points into account, and the item can shrink.

Which One When

The Rule

Flex and grid items refuse to shrink below their content by default. If something inside a layout can be wider than the space it is given, tell the container it is allowed to shrink with min-width: 0 or minmax(0, 1fr), and decide where the overflow should scroll or wrap.

Quick audit: open your app and paste a 200-character string with no spaces into every input that is later displayed. Then widen a table to 40 columns. If the page grows a horizontal scrollbar, you have found a missing min-width: 0.

I test every layout in my Next.js and Tailwind templates against this kind of hostile content, because real users do paste long strings, and a dashboard has to survive it.

Get the templates: https://pixelanas.gumroad.com

What is the ugliest layout bug a single piece of user content has caused you? Drop it in the comments.

Anas, full-stack Next.js developer building SaaS products and premium templates. X: @ASheikh69751