Any absolute CSS wizards able to tell me why, in order to actually shrink when the window shrinks, a grid cell element needs min-width: 0? Sincerely, man who just lost an hour of his life to this. - ThreadSky

samwho.dev • 70 days ago

Any absolute CSS wizards able to tell me why, in order to actually shrink when the window shrinks, a grid cell element needs min-width: 0?

Sincerely, man who just lost an hour of his life to this.

Comments

crswll.dev•70 days ago

Only an hour? Consider yourself a lucky genius.

konnorrogers.com•70 days ago

Because the default min-width is basically min-content.

The actual spec because it's not always this way, just sometimes this way.

https://www.w3.org/TR/css-grid-1/#min-size-auto

konnorrogers.com•70 days ago

*here's the actual spec

aryan.02420.dev•70 days ago

@firefoxdevtools.bsky.social are super helpful to debug such layout issues. They nicely highlight all constraints and make final computed size easy to understand.

maxime.bsky.social•70 days ago

I just know I have to do the same shenanigans if I want text to be dynamically truncated within a flexible div

I would love to believe it's one of life's mystery and that's just how things are

simeongriggs.dev•70 days ago

I can't explain it, I only know how to "fix" it
https://x.com/adamwathan/status/1734696245015494711

samselikoff.com•70 days ago

Age and experience are no match for this foe https://x.com/samselikoff/status/1848898500643233987?s=46

samwho.dev•70 days ago

I really want to learn the background required for this to become an intuitive thing to me. As it stands my mental model of CSS is completely broken by the need for this in the places I’ve had to use it.

samselikoff.com•70 days ago

I found Josh Comeau’s recent talk helpful. Basically when you say something like “width: 30%”, you’re not actually saying the width is 30%. The final calculated width is more like a result from a function calculation: widthAt30Percent(content). The layout mode determines the final result.

samselikoff.com•70 days ago

So your CSS declarations are more like inputs rather than outputs. The declaration is one input, the DOM is another, and the final calculated layout is the output.

samwho.dev•70 days ago

Isn’t this mental model shattered by this?

https://bsky.app/profile/samwho.dev/post/3ldk36tt74s2k

andreasmoller.dk•70 days ago

Job security.

If it made sense we would be to easy to replace.

yuvalshimoni.bsky.social•70 days ago

The shrink applies only to the available space when there’s extra room.
If there isn’t any space, the element will take its minimum width based on its content.
(The same behavior applies to flex.)

samwho.dev•70 days ago

I did notice the same thing happened with flex. It feels weirder in grid because I've specifically created a "1fr 1fr" grid. Doesn't this default behaviour break that "contract"?

konnorrogers.com•70 days ago

What you actually want is

minmax(0, 1fr) minmax(0, 1fr)

samselikoff.com•70 days ago

It’s so frustrating that true constraint-based layouts seem impossible

samwho.dev•70 days ago

What fucks me up about this one in particular is that my layout starts out correct, then I expand the window and it’s still correct, then I go back to the original size and it’s WRONG. The left half does not shrink back to the size it started at. Why! It’s infuriating not understanding why.

samselikoff.com•70 days ago

That is brutal haha – been there 🥴

olivierforget.net•70 days ago

Yeah this gets many people, me included for a long time (more than an hour!) Even if there are technical reasons, it seems the "contract" of grid is that you define the layout from the outside, and the contents fit inside. But this min-width thing is like CSS says "haha just kidding".

yuvalshimoni.bsky.social•70 days ago

No, because it only refers to the extra space.

Think of it like this:
1. **First**: Calculate the minimum width of each cell.
2. **Then**: The `1fr 1fr` determines how you divide the remaining extra space between the cells.

Comments

Posting Rules

Reply