Grid allocates tracks using content and available space. A fractional track can still have a content-based minimum unless constrained.
Before you start
You should be comfortable with semantic HTML, CSS selectors and browser developer tools. Reproduce the scenario in a small page before adding framework code. Inspect both visual appearance and keyboard or accessibility behavior; a correct screenshot alone is not sufficient evidence.
The practical goal is to reason through this situation: A sidebar plus minmax(0, 1fr) content track allows long content to shrink within its area. Read the walkthrough first, then try the interview exercise before opening its answer. The important part is explaining the decision and its consequences, rather than remembering a definition alone.
Step-by-step walkthrough
Step 1: Inspect track minimums
A fractional track can retain a content-based minimum; one fr does not guarantee overflow prevention.
Step 2: Set the intended minimum
Use minmax(0, 1fr) where the content area should fit remaining space.
Step 3: Handle oversized descendants
Allow text wrapping or provide scrolling for wide code and tables instead of clipping information indiscriminately.
Worked scenario
A sidebar plus minmax(0, 1fr) content track allows long content to shrink within its area.
.layout { display: grid; grid-template-columns: 14rem minmax(0, 1fr); }
pre { overflow-x: auto; }The second track may shrink below its intrinsic content width. The code block scrolls within it. A fixed sidebar still needs a responsive breakpoint or another layout strategy when the whole viewport becomes narrow.
Common mistake
Replacing every track with fixed pixels can create small-screen overflow.
Verify the behavior
Test a long code line, large table and narrow screen. Inspect track widths rather than assuming one fr alone solves every overflow.
Interview exercise
Explain why one-fr overflowed.
Answer and reasoning
The track’s minimum can follow content. Set a deliberate minimum and decide how oversized content wraps or scrolls.
Continue learning
Compare the scenario with the HTML and CSS interview questions and test your understanding with the HTML and CSS MCQs. For terminology and implementation details, consult the reference material.