Flex items can retain an automatic minimum size based on their content. Allowing shrinkage often requires an explicit minimum-width decision.
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 long filename inside a flexible row can push its action button off-screen. 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: Find the overflowing item
Inspect the flexible text item rather than immediately shrinking its neighboring button.
Step 2: Allow intentional shrinkage
Set min-width:0 on the appropriate flex item so its content-based minimum does not force overflow.
Step 3: Choose content treatment
Apply wrapping, scrolling or truncation deliberately; shrinking alone does not define what happens to long text.
Worked scenario
A long filename inside a flexible row can push its action button off-screen.
.row { display: flex; gap: 1rem; }
.filename { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.action { flex: none; }The filename can shrink while the action retains its size. Ellipsis hides part of the visible name, so provide a way to access the full filename when it matters.
Common mistake
Setting flex-shrink alone may not overcome the automatic minimum.
Verify the behavior
Try a long unbroken filename at narrow widths and large text size. Confirm the action remains reachable and full content is available.
Interview exercise
Keep the filename truncated.
Answer and reasoning
Apply min-width:0 to the appropriate flex item and an explicit overflow and text-overflow policy.
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.