We built a simple two-column page. The side menu had a fixed width. The main column was 1fr, which we read as "take whatever width is left." Then we put a long, unwrapped line of code in the main column. The page grew a horizontal scrollbar. The main column was wider than the leftover space. The 1fr did not shrink.

This is a CSS Grid issue. It is close in spirit to a flex item's automatic minimum, but the property that surprises people here is the track size itself.

The layout 

<div class="page"> <nav class="side">Menu</nav> <main class="main"> <pre>npm install some-long-package-name-and-then-another-one</pre> </main> </div> 
.page { display: grid; grid-template-columns: 120px 1fr; width: 400px; } .main pre { margin: 0; white-space: nowrap; }

The page is 400 pixels wide. The menu is 120 pixels. You would expect the main column to be the rest, about 280 pixels. You would also expect the long line to sit inside it, or to scroll inside it. That is not what happens.

What we measured

We pasted this layout into Chrome and measured the boxes on November 13, 2026, in Chrome 156.

The long line in this snippet measured about 430 pixels. The main column grew to that same width, about 430 pixels. The 400-pixel page then overflowed. The 1fr track did not stay in the leftover space.

Why a bare 1fr has a content minimum

fr means a fraction of leftover space. MDN's page on grid-template-columns adds a key detail. When fr is used on its own, not inside minmax(), it implies an automatic minimum. MDN writes this as minmax(auto, <flex>). So 1fr is minmax(auto, 1fr).

The 1fr is only the maximum. The minimum is auto. For a grid item, that automatic minimum is based on its content when the item is not a scroll container. The CSS Grid specification covers this in section 6.6. A single long line that cannot wrap sets a floor for the track: the track will not get narrower than that line.

So the track will not go below that line's width, even when the line is wider than the leftover space. The page overflows.

Two direct fixes

The first fix is to set the minimum to zero in the track list:

.page { display: grid; grid-template-columns: 120px minmax(0, 1fr); width: 400px; }

In the same Chrome test, the main column shrank to the leftover space: 280 pixels, after the 120-pixel menu. The long line no longer forced the column open.

The second fix leaves 1fr as it is and puts min-width: 0 on the grid item in that column:

.main { min-width: 0; }

That also gave a 280-pixel main column in our test.

If you want the long line to scroll inside the main column, add overflow: auto on .main as well. In a third test, overflow: hidden on .main also let the column shrink to 280 pixels. It clipped the leftover content, so the page itself no longer overflowed. We prefer minmax(0, 1fr) or min-width: 0, and overflow: auto when the content should scroll inside the column.

Equal columns have the same trap

grid-template-columns: 1fr 1fr looks like two equal halves. It is two tracks that each have a content minimum. In our 400-pixel page, we put the same long line in the left column and a short word in the right. The left column grew to the full width of the line. The right column was only 37 pixels wide. They were not equal.

grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) made both columns 200 pixels, which is half of the 400-pixel page.

If you want equal, shrinking columns, write the zero minimum on each track.

A short checklist

  • A bare 1fr is minmax(auto, 1fr). The auto is a content minimum.
  • Long unwrapped text, a wide table, or a large image can hold that track open.
  • Use minmax(0, 1fr) on the track, or min-width: 0 on the item.
  • Do this for every 1fr track that should be allowed to shrink.
  • If the content is still wider than the column, set overflow on the item so the extra scrolls or clips inside it.

Browser support is broad. On MDN, grid-template-columns and minmax() are marked Baseline widely available from October 2017.

Sources

PIXEL RECRUITING LLC looks for frontend and UI engineers who can explain why a grid track will not shrink, not only paste a fix. We are a direct staffing partner for Mastercard in O'Fallon, MO. You can see how we work at pixelrecruiting.com.