flex-basis and the min-width: auto trap

A flex item refuses to shrink below its content, because min-width defaults to auto on flex items rather than to zero. The symptom is a long word or a wide table pushing a column out of its container.

.column {
    flex: 1;
    min-width: 0;      /* the fix */
}

/* the same problem in a column layout */
.row { min-height: 0; }

It is the single most common flexbox bug and it does not look like a flexbox bug — the overflowing element appears to be at fault. overflow: hidden also happens to fix it, because it changes the automatic minimum size, which is why that workaround circulates without an explanation. min-width: 0 is the one that says what it means.