Flex item won’t shrink and pushes the page sideways

If a row uses display: flex and a text column refuses to get narrower, its automatic minimum width may be the cause. Long words, URLs or preformatted text can hold that minimum open. Flex shrinking does not automatically override it.

Let the text column shrink

.row { display: flex; gap: 1rem; }
.sidebar { flex: 0 0 8rem; }
.content { flex: 1 1 auto; min-width: 0; }
.content p { overflow-wrap: anywhere; }
.content img { max-width: 100%; height: auto; }
.content pre { overflow-x: auto; }

Put min-width: 0 on the flex item itself, not just on the paragraph inside it. It lets the column shrink. It does not make every child fit, which is why long text, images and code need their own rules.

Measured example: a long line of code

I tested a row with a 128-pixel sidebar, a 16-pixel gap and a code block containing long-code-token- repeated 20 times. The main column started with flex: 1 1 auto. Adding min-width: 0 to the column and overflow-x: auto to the code block produced these results:

The code line still scrolls inside its column. These measurements describe this fixture only, not every browser or your page. Open the fixed example. To reproduce the fault in developer tools, remove the column’s min-width rule and the code block’s overflow-x rule.

Check which box is too wide

In your browser’s developer tools, select the item that is a direct child of the flex container. Add min-width: 0 temporarily. If the row now fits but text still sticks out, fix wrapping on that text. If nothing changes, check fixed widths, min-width rules, white-space: nowrap and nested flex items. A nested layout may need the change at more than one level.

Do not put overflow-x: hidden on the whole page to hide the fault. It can cut off content and focus outlines without fixing the layout.

When the sidebar cannot fit either

The example keeps an eight-rem sidebar. On a narrow screen that can leave too little room for the main column. Stack the row at a breakpoint chosen for your content:

@media (max-width: 36rem) {
  .row { flex-direction: column; }
  .sidebar { flex-basis: auto; }
}

Test with a long URL, a large image and keyboard focus. Check a narrow phone width and browser zoom. This fix applies to a horizontal flex layout in a normal horizontal writing mode. For a vertical flex item that refuses to shrink, investigate min-height: 0 instead.

Want this fixed on your page? One agreed HTML or CSS fix costs $29. You keep the code.