Re: [csswg-drafts] [css-sizing][css-grid][css-flexbox] Intrinsic Sizes, Scroll Containers, and Grid/Flex Sizing (#1865)

I _believe_ I stumbled upon this "problem", but I am not entirely sure, so let me know if I should create a new issue (or if there's already a way to achieve what I'm after and I'm simply missing it).

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, 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`.

I hope I'm wrong and it's possible to achieve that, but if not, then am I at least correct that this use case falls under the current issue?

Here's [the Codepen](https://codepen.io/benface/pen/zxYgrpK) I made for the above. Thank you!

-- 
GitHub Notification of comment by benface
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1865#issuecomment-2797735334 using your GitHub account


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

Received on Friday, 11 April 2025 18:29:40 UTC