How can I stop a long word from stretching a grid or flex layout?

An unbroken string has no ordinary word boundary where it can wrap. If it is too long for its container, it can overflow. [S1]

There can also be a sizing issue: grid and flex items can have an automatic minimum size based on their min-content size. A long word can constrain how narrow the item gets, so the layout may grow instead of shrinking the item. [S2]

Here’s a small reproduction. The long value is deliberately unbroken:

<div class="layout">
  <aside>Sidebar</aside>
  <main class="card">
    <p>Reference: ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789ABCDEFGHIJKLMN</p>
  </main>
</div>

.layout {
  display: grid;
  grid-template-columns: 12rem 1fr;
  gap: 1rem;
}

.card {
  border: 1px solid #888;
  padding: 1rem;
}

If the available space is narrow, check both the item’s minimum size and how its text is allowed to wrap.

Use min-width: 0 on the grid or flex item that needs to shrink. This removes its automatic minimum-size constraint; it does not, by itself, guarantee that the text will wrap. [S2]

Then use overflow-wrap: anywhere on the text container if the string itself needs to break. This can break an overlong word when it cannot fit. [S1]

.card {
  min-width: 0;
}

.card p {
  overflow-wrap: anywhere;
}

Try the rules separately. If min-width: 0 lets the card fit but the string still spills out, add the wrapping rule. If the text wraps but the grid or flex item still refuses to shrink, check that min-width: 0 is on the actual item participating in that layout. Use both when both symptoms occur.

In the grid example, put min-width: 0 on the card, then put the wrapping rule on the element containing the long text:

.card {
  min-width: 0;
  border: 1px solid #888;
  padding: 1rem;
}

.card p {
  overflow-wrap: anywhere;
}

For a flex layout, apply the same idea to the flex item that needs to shrink and to the text it contains:

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

.content {
  min-width: 0;
}

.content p {
  overflow-wrap: anywhere;
}

The key is to put min-width: 0 on the constrained grid or flex item, not just on an unrelated ancestor. Put overflow-wrap on the element containing the long text. These selectors are illustrative; use the elements that play those roles in your markup. [S1] [S2]

Compare the layout before and after at the widths where the issue appeared. Check that the page no longer gains unwanted horizontal width, that the long value breaks inside its intended container, and that nearby columns or cards still have usable space. If the value is meaningful as one unit, consider whether breaking it makes it harder to read.

These rules address minimum sizing and text wrapping. They do not establish why a page is overflowing if another element or layout constraint is responsible. If the issue remains, inspect the overflowing element and its parent layout rather than adding broad overflow clipping, which can conceal content.