Why Flex Items Refuse to Shrink: `min-width: auto`

.build-copy {
  flex: 1 1 auto;
}

.build-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.build-copy pre {
  max-width: 100%;
  overflow-x: auto;
}

Root cause

A flex item has an automatic minimum size by default. Depending on its overflow and content, that minimum can be based on the min-content width. The item can therefore refuse to become narrower than a long unbroken descendant.

Setting min-width: 0 on the flexible item permits it to shrink below that content-based floor. This does not decide how every child should render, so a wide code or data region still needs an intentional local overflow or wrapping policy.

Diagnose the flex item, not only its child

Measure the flex container, each direct flex item, and the long descendant separately. The failing signal in this fixture is a flexible item whose rendered width stays near its min-content contribution even though the row has less available space. A temporary min-inline-size: 0 on that direct item should reduce the page width immediately; applying the same declaration only to the nested pre does not change the flex item’s automatic floor.

After the item shrinks, verify that the child still has a deliberate behavior. Ordinary prose should reflow, while the exact filename in this case remains available through the labeled local code region. This second check prevents a visually narrow layout from passing by clipping the content that originally exposed the sizing problem.

When this fix is not enough

Apply the rule to the flex item that needs to shrink, not indiscriminately to every descendant. If the page is still wide, measure all ancestor and child bounds; fixed-width media, transforms, negative margins, and nested grid tracks are separate mechanisms.

Regression condition

The failing fixture should overflow at the narrow test viewports. The fixed fixture must keep the page width stable while the long filename remains reachable inside its local scroll container.