Flexbox Card Won't Shrink Around a Long URL? Fix It

A horizontal flex card that will not get any narrower is a frustrating layout puzzle, especially once a long URL lands inside it. You already have flex-shrink: 1 in place, yet the card keeps pushing past its container the moment the link text shows up. This happens because two separate problems look identical from the outside. First, the flex item holding the link has an automatic minimum width that flex-shrink cannot override by itself. Second, the URL itself may have no natural place to break, so even a correctly sized item can still let the text overflow.

This article assumes a basic row-based flex layout and walks through a small worked example: a card with a fixed label and a details column that holds a long, effectively unbroken URL. You will see why min-width: 0 on the right flex item removes the automatic minimum, why that alone is not the whole fix, and how overflow-wrap: anywhere lets the URL text wrap so the card stays within its intended width.

The Symptom: A Card That Overflows Even Though flex-shrink Is Set

Start with a small, self-contained example: a card with a fixed-width label on the left and a details column on the right that holds a link. The card sits inside a wrapper with max-width: 24rem, so it should never grow wider than that no matter what text lands inside it.

<div class="card">
  <span class="label">Link</span>
  <div class="details">
    <a class="url" href="https://example.com/a-very-long-unbroken-path-and-identifier-that-keeps-going-and-going">
      https://example.com/a-very-long-unbroken-path-and-identifier-that-keeps-going-and-going
    </a>
  </div>
</div>

.card {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  padding: 1rem;
}

.label {
  flex: none;
  font-weight: 600;
}

.details {
  flex: 1 1 auto;
}

.url {
  color: #1a5fb4;
}

Paste that markup and those two rules into a page and the card overflows its 24rem limit anyway. The .details column, and the URL text inside it, push past the right edge of the card, and depending on the surrounding page this can force a horizontal scrollbar. Setting .details { flex-shrink: 2; }, or rewriting the rule as flex: 1 1 0;, does not fix it, because the shrink factor is not the problem. The real cause is the automatic minimum size every flex item gets by default, which is covered next.

Why flex-shrink Doesn’t Help: The Automatic Minimum Size

Every flex item has an automatic minimum size along the main axis, and by default browsers calculate that minimum from the item’s content, similar to its min-content width. The CSS Flexbox specification describes this automatic minimum size and lists exceptions, including flex items whose overflow value is something other than visible, which get an automatic minimum of zero instead of one based on content.

In the broken example, .details has no overflow property set, so it keeps the content-based minimum, and that minimum is wide enough to fit the entire unbroken URL without wrapping at all. flex-shrink: 1 only controls how much a flex item shrinks below its flex basis once the row runs out of space; it does not override this separate minimum-size floor. That is the real reason a flex item can resist shrinking around a long URL even when shrinking is explicitly enabled, and it is also why the fix has to target the minimum size directly rather than the shrink factor.

This automatic minimum is not unique to text either. It applies to whatever content sets the item’s min-content size, but a single long, unbroken string of characters is one of the most common ways to hit it in real layouts, since there is no word boundary for the browser to measure against.

Fix One: Add min-width: 0 to the Flex Item Holding the Long URL

Add one declaration to the .details rule: min-width: 0. That line removes the automatic minimum size described above, so the flex item is free to shrink as far as flex-shrink allows, all the way toward zero if the row runs out of room.

.details {
  flex: 1 1 auto;
  min-width: 0;
}

Reload the card with this change and .card stops overflowing its 24rem limit; the details column, and the card itself, now respect the container width. To see this for yourself, skip the site’s CSS Editor for this particular test, since it previews a fixed sample page rather than markup you control; instead paste this HTML and CSS into the HTML Code Editor, which renders your own custom page in a live preview so you can toggle min-width: 0 on and off and watch the card resize. If you want a broader look at how tools like this fit into everyday styling work, CSS editors in modern web development is a useful follow-up read.

There is still a problem, though. The card no longer overflows, but the URL text inside .details now runs past the right edge of that column, because nothing yet tells the browser where it is allowed to break the string. Removing the minimum width let the container shrink; it did not give the text anywhere to wrap, which is a separate concern covered next. MDN’s reference on min-width documents this property in full, including how it interacts with max-width and flex-basis.

Fix Two: Let the Long URL Overflow-Wrap Instead of Overflowing the Card

Add overflow-wrap: anywhere to .url. This property tells the browser it may insert a line break inside a word, or inside an otherwise unbreakable string, when there is no better place to break. That is exactly the situation with a long URL that has no spaces or hyphens near the edge of the column. It also affects sizing indirectly: breaks introduced by anywhere count when the browser calculates min-content size, so the content-based automatic minimum of .details becomes much smaller. In this example, overflow-wrap: anywhere on its own would likely stop the card from overflowing.

The two fixes work at different levels. min-width: 0 removes the minimum directly, for any content, but leaves the text without break points. overflow-wrap: anywhere adds break points and, as a side effect, lowers the minimum. Using both is the more robust choice, since the first makes the flex-item constraint explicit and the second keeps the URL readable.

.card {
  display: flex;
  gap: 1rem;
  width: 100%;
  max-width: 24rem;
  box-sizing: border-box;
  border: 1px solid #d0d0d0;
  padding: 1rem;
}

.label {
  flex: none;
  font-weight: 600;
}

.details {
  flex: 1 1 auto;
  min-width: 0;
}

.url {
  color: #1a5fb4;
  overflow-wrap: anywhere;
}

With both declarations in place the URL wraps onto as many lines as it needs inside .details, the card stays at its max-width: 24rem, and there is no horizontal overflow left to hide. MDN’s overflow-wrap reference notes that both anywhere and the older break-word keyword can break an otherwise unbreakable string, but only breaks introduced by anywhere count toward the min-content sizing discussed earlier, which is one more reason to prefer it for this kind of layout.

A quick comparison helps decide which wrapping approach fits a given case:

Approach	What it does	When to use it
`overflow-wrap: anywhere`	Breaks only when a line has no other way to fit, and counts toward min-content sizing	Default choice for links, IDs, and other unpredictable long strings
`word-break: break-all`	Breaks between any two characters, including inside ordinary words	Rare; only when breaks everywhere are actually desired, not just as a fallback
`<wbr>`	Marks one manual break opportunity at a chosen character position	Text you fully control, where you can place the break yourself

MDN’s word-break reference documents break-all‘s more aggressive behavior in detail, which is why it is worth reserving for cases where wrapping mid-word is actually desirable rather than a side effect.

A Checklist for Diagnosing Similar Flex Overflow

Once the card behaves correctly for one test case, run through this checklist before trusting the fix in a real project:

Identify the actual flex item that contains the long content. In nested markup the element you style is not always the direct child of the flex container; min-width: 0 only works when applied to that direct flex item, not to a descendant further inside it.
Check for a flex row further up the tree. If the card itself is a flex item inside another row, that outer relationship has its own automatic minimum and needs the same inspection, separately from the inner card.
Search the ancestor chain for white-space: nowrap. That declaration on the link, the details column, or an ancestor stops the browser from wrapping at all, and overflow-wrap: anywhere cannot override it.
Look for a fixed width or flex: none on a sibling item. An inflexible label or icon column can consume the row’s space before the flexible column ever gets a chance to shrink.
Treat overflow: hidden as a warning sign, not a fix. Clipping the text hides the symptom but leaves the long URL unreadable, which usually means the underlying minimum-size or wrapping issue is still there.

Many of these overflow issues trace back to a handful of common coding mistakes worth avoiding early in a project, and it is worth reviewing that list once the flex card itself is behaving correctly.

Frequently asked questions

Why doesn’t flex-shrink: 1 alone let the card shrink around the URL?

flex-shrink only controls how much a flex item shrinks below its flex basis once the row runs out of space. It does not remove the item’s automatic minimum size, which by default is based on the item’s content, such as an unbroken URL. Until that minimum is addressed directly with something like min-width: 0, the item can hit its floor before it ever gets small enough for the URL to fit.

Does min-width: 0 need to go on the link itself or on its container?

Put it on the direct flex item, the element that is an immediate child of the flex container with display: flex. In the example card that is .details, not the .url link nested inside it. Setting min-width: 0 on a descendant that is not itself a flex item has no effect on the flex row’s sizing.

Why does the URL still overflow after I add min-width: 0?

min-width: 0 removes the automatic minimum width from the flex item’s sizing, which lets the item itself shrink. It does not tell the text inside how to break. A long, unbroken URL still has no wrap points, so it can render past the edge of its now-narrower column until overflow-wrap: anywhere or a similar wrapping rule is added.

What’s the practical difference between overflow-wrap: anywhere and word-break: break-all?

overflow-wrap: anywhere only inserts a break when a line would otherwise have no way to fit, and those breaks count toward the item’s minimum content size. word-break: break-all is more aggressive: it can split ordinary words anywhere, even when there was already a perfectly good space to wrap on, which usually looks worse for normal prose mixed with links.

Can <wbr> replace overflow-wrap for a long URL?

<wbr> marks one specific point in the text where a break is allowed, so it works when the string is under your control and you can insert it at sensible spots, such as every dozen characters. It is not a substitute for overflow-wrap: anywhere on text you do not control, like a user-submitted or database-driven URL, since you cannot predict where to place the markup.

Does every flex item have this content-based automatic minimum?

No. The Flexbox specification lists exceptions, including flex items whose overflow value is something other than visible, which get an automatic minimum of zero instead of one based on content. Most cards and rows leave overflow at its default, visible, so the content-based minimum applies, but it is worth checking rather than assuming it always does.

What’s a quick way to test this fix without setting up a full project?

Paste the card’s HTML and the CSS with both fixes into the HTML Code Editor, since it renders custom markup and styles in a live preview rather than a fixed sample page. Shrink the container’s max-width and confirm the card stays inside its bounds while the URL wraps onto multiple lines instead of overflowing.

Next steps

A flex item that will not shrink around a long URL involves two related mechanisms. min-width: 0 on the direct flex item that holds the link removes the automatic minimum size directly, whatever the content is. overflow-wrap: anywhere on the URL gives the browser somewhere to break a string with no natural break points, and because those breaks count toward min-content sizing, it also lowers that content-based minimum. In the example card, overflow-wrap: anywhere alone would likely be enough to stop the overflow. min-width: 0 alone lets the column shrink but leaves the URL text spilling past it. I still recommend using both, because min-width: 0 makes the intent explicit and also covers content that has no wrapping rule, while overflow-wrap keeps the text readable. With the pair in place, a card with max-width: 24rem stays that wide however long the link gets. Test the result in a live page before trusting it in production, and keep the checklist nearby the next time a flex row refuses to cooperate around unpredictable content.

Related tools and resources on HTML Editor Online:

Flex Item Long URL Overflow: Fix It With min-width: 0

Table of Contents