A row contains an icon and a long filename. You give the text area flex: 1, but the row still pushes beyond the narrow screen. The missing detail may be the flex item’s automatic minimum width, not the amount of flexible space assigned to it.
MDN’s min-width reference explains that the automatic minimum for flex items can depend on their content. In the relevant case, an unbroken string can stop the item shrinking as expected. Setting min-width: 0 on that item allows a smaller width; it does not by itself decide how text should wrap.
Give shrinking and wrapping separate jobs
.file-row {
display: flex;
gap: .75rem;
}
.file-icon {
flex: 0 0 auto;
}
.file-name {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}This illustrative pattern lets the text item shrink and permits a long string to wrap. Test it within your actual markup, especially if another nested flex item supplies the width constraint. Applying the rule to a distant ancestor may leave the problematic child unchanged.
Use a test filename longer than a comfortable line, then narrow the viewport. Also test ordinary text, browser zoom, and a translated label. The useful result is readable content without page-wide horizontal overflow, not merely an element whose border fits.
If the design needs a single-line truncated label, implement that deliberately and provide a way to access the full value. Hiding overflow can conceal the symptom while making an important filename impossible to distinguish from another.
In developer tools, compare the item’s computed minimum width before and after the change. That small experiment identifies the constraint instead of scattering overflow rules across the whole page. Keep the fix on the element that actually needs to shrink.