A two-column layout works with sample text, then stretches beyond the viewport when a real customer name, long URL, or code block arrives.
Adding overflow: hidden to the page may remove the visible scrollbar while leaving part of the content inaccessible.
A better investigation begins with the minimum sizes of the grid tracks and their items. Flexible columns still participate in sizing rules, and content can influence how small they are allowed to become.
Distinguish available space from minimum size
The fr unit distributes available space between flexible grid tracks. The minmax() function defines a track’s minimum and maximum size.
MDN documents both the flexible share represented by fr and the minimum-size behavior available through minmax().
For an illustrative equal-column layout:
.results {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}The zero explicitly allows those tracks to shrink below a content-based minimum.
This addresses track sizing. It does not automatically decide how every long string, image, or embedded component should behave inside the resulting space.
Inspect the grid item too
Grid items can have an automatic minimum width influenced by their content. MDN’s min-width documentation describes this behavior and its exceptions.
A targeted rule may be appropriate for a component that needs permission to shrink:
.result-card {
min-width: 0;
}Use developer tools to identify the element that is imposing the unwanted width.
The overflowing object may be several levels inside the card. A fixed-width child, an unbroken value, and a wide table require different follow-up decisions.
Avoid applying resets indiscriminately before understanding which box is responsible.
Give the content an intentional behavior
Once the container can shrink, decide how its contents should remain usable.
A long title may wrap. A code example may need a horizontally scrollable region. A diagram may require a responsive presentation or a dedicated detail view.
These choices belong to the component’s purpose.
For a hypothetical account dashboard, clipping a customer identifier could make two records indistinguishable. Preserving the complete value through wrapping or an accessible detail mechanism is more useful than merely producing a tidy rectangle.
Judge the result by whether users can still retrieve the information they need.
Test with difficult content early
Replace short placeholders with realistic extremes.
Include a long name, a URL, a narrow viewport, and a card containing structured content. Increase text size and check whether controls remain reachable.
A layout that succeeds only with ideal text is not ready for ordinary publishing.
Keep the test content in a reusable development example so future changes encounter the same challenge. Otherwise, the next designer may unknowingly reintroduce the original sizing assumption.
Verify the whole layout after the fix
Check neighboring columns, gaps, and alignment after changing minimum sizes.
A rule that fixes one card may reveal another component’s width problem. Inspect the page without hiding overflow globally, so remaining issues stay visible.
Also review the single-column layout, where the same component may have a different amount of available space.
The useful result is a grid that can adapt while preserving its content. Minimum-size controls establish the available room; component design determines what happens inside it.
Sources: Sources: MDN: minmax() · MDN: min-width
