How to Build a Two-Column Article Layout Without Mobile Overflow

Start with a straightforward semantic structure:

The initial CSS typically looks like this:

On a large screen with simple paragraphs, this works fine. The problem starts when the main article contains content with a larger intrinsic minimum size than the available grid track.

You might think: "The second column is 1fr, so it must shrink to fit the available width."

Not necessarily. Grid and Flexbox have automatic minimum sizing behavior. A grid item's automatic minimum size can be influenced by its content's intrinsic minimum width—such as a long unbroken URL or a multi-column table:

Certain descendants establish a minimum width that prevents the 1fr track from shrinking enough, pushing the main article past the right edge of the viewport.

1fr is shorthand for minmax(auto, 1fr). That auto minimum means the track refuses to shrink smaller than the minimum intrinsic width of its children (long URLs, unbroken strings, wide tables, preformatted code, or fixed-width embeds).

Instead of grid-template-columns: 320px 1fr;, use:

minmax(0, 1fr) explicitly gives the flexible track a minimum of 0, telling the Grid track: "You are allowed to become as narrow as zero rather than preserving an automatic minimum based on the content."

Pair minmax(0, 1fr) on the parent track with min-width: 0 on the grid item itself:

• minmax(0, 1fr) controls the grid track.
• min-width: 0; allows the grid item itself to shrink below its content's intrinsic width.

Allow long strings and URLs to wrap instead of overflowing their container:

Shrinking every table column until text squishes vertically is unreadable. Instead, wrap the table in a container with overflow-x: auto:

Putting overflow-x: hidden on body hides the scrollbar by clipping content off-screen (making 610px of a 1000px element completely unreachable on a 390px phone). Fix the intrinsic width at the source instead.

Make the inner sidebar sticky and set align-items: start on the grid container so the sidebar track doesn't stretch to full height:

Adding overflow: hidden or overflow: auto to .article-layout or parent wrappers alters the scrolling context and breaks position: sticky. Apply overflow-x: auto only to specific child wrappers like .table-wrapper and pre.

Collapse the grid to a single column below 900px and reset the sidebar to position: static so it doesn't cover the screen while scrolling on mobile:

Setting .article-content { width: 100%; } does not override the parent Grid sizing algorithm if the track is still defined as 1fr. You must pair minmax(0, 1fr) on the grid track with min-width: 0 on the grid item.

When a mobile page develops horizontal scrolling, inspect at the exact viewport width where it breaks or temporarily apply:

Compare the computed width of <table>, <pre>, <code>, <iframe>, and long URLs against the containing block (and remove the outline before shipping).

1. Is the Grid track allowed to shrink (minmax(0, 1fr))?
2. Can the Grid item itself shrink (min-width: 0)?
3. Is there an unbreakable string (overflow-wrap: break-word)?
4. Is a table wider than the article (.table-wrapper { overflow-x: auto })?
5. Is an image or iframe wider than its parent (max-width: 100%)?
6. Is the sidebar still sticky on a narrow viewport (position: static)?
7. Did an ancestor create an unexpected scrolling context?

For multi-line code blocks, character-by-character wrapping hurts readability. Let <pre> scroll horizontally inside its own box:

Keep your base layout CSS boring and predictable so authors can publish any combination of tables, code snippets, and links without breaking mobile viewports.