[csswg-drafts] [css-grid] A way for columns to shrink below their minimum width when they overflow? (#12071)

benface has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] A way for columns to shrink below their minimum width when they overflow? ==
(Originally posted in https://github.com/w3c/csswg-drafts/issues/1865#issuecomment-2797735334)

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:

![Image](https://github.com/user-attachments/assets/c6d02c40-2419-458f-aa75-462261fd23df)

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

![Image](https://github.com/user-attachments/assets/f3a1aed2-76ab-4b31-b07b-cb57baec168b)

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

![Image](https://github.com/user-attachments/assets/000b5831-ff03-4ad1-93a5-d42b5983a009)

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?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12071 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 12 April 2025 03:26:42 UTC