(Originally posted in #1865 (comment))

First, because a Codepen example is worth a thousand words: https://codepen.io/benface/pen/zxYgrpK

I want to have a row of tabs that are ideally all the same width (think display: grid; grid-auto-flow: column; grid-auto-columns: 1fr) and a single line of text as their label (white-space: nowrap). If the container is not wide enough to make all the tab labels fit, they should be truncated (overflow: hidden; text-overflow: ellipsis). But I don't want the truncation to happen until there's no more space on the row, meaning that tabs should not be forced to be equal width if it means truncating a tab that has a long label while there's empty space in other tabs/columns, as shown here:

If I replace grid-auto-columns: 1fr by grid-auto-columns: minmax(min-content, 1fr), I get the exact behavior that I want:

...except that now, the tabs overflow when there's no empty space left, instead of getting truncated. 🥲

From what I understand, that's caused by the min-content in minmax() being inflexible. But that min-content is also what prevents tabs from being truncated when there's still space on the row. Seems like what I'm after would be something like grid-auto-columns: minmax(fit-content, 1fr), but that's invalid. I also tried grid-auto-columns: minmax(auto, 1fr), but that seems to behave exactly like grid-auto-columns: 1fr.

Is there really no way to achieve that?