Keep Code Blocks Scrollable Without Widening the Page

.article pre {
  overflow-x: visible;
}

.article pre {
  max-inline-size: 100%;
  overflow-x: auto;
}

Root cause

The default white-space behavior of pre preserves the authored line. That is useful when line breaks and spacing carry technical meaning, but a long line can overflow the element. If the element does not establish its own scrollable overflow area, the document becomes the effective horizontal scroll container.

The repair keeps white-space: pre. It changes where overflow is handled, not the command itself. The code region is keyboard focusable and retains the entire line.

Verify the local scrolling contract

Measure both boundaries after the repair: the document should have no extra scroll width, while the code element should report scrollWidth greater than clientWidth for the deliberately long command. Then reach the region using only the keyboard, move the local horizontal scroll position, and confirm that its focus indicator remains visible. A mouse-only scrollbar is not enough for a technical example whose complete line is part of the content.

Also test copy and selection from the start through the end of the command. Truncation, fading overlays, or overflow: hidden can make the page appear responsive while removing characters. The fixture passes only when the exact authored line remains available and unrelated article text continues to reflow normally.

When this fix is not enough

Short illustrative snippets can sometimes wrap safely, but wrapping commands, diffs, tables, or aligned output may change how they are read. A local scrollbar is a deliberate Reflow exception for genuinely two-dimensional content, not a general excuse for making article text scroll sideways.

Regression condition

At narrow viewports, the failing fixture must produce page-level overflow. The fixed page must have zero page-level overflow while the code block itself reports positive local overflow, proving that the end of the command remains reachable rather than clipped.