`1fr` as min value in `minmax()` doesn't work
https://jsfiddle.net/KonerDev/uthpkoL2/13/
The box should be 400 pixels wide, and if the browser width is smaller, the box should fill the entire width of the grid. WHY doesn't this approach work?
5 Replies
1fr means "take all the leftover space and distribute it to each column", so as a min value that doesn't make sense, because if we're smaller than 400px, there will be no space to distribute
I think what you're after is
minmax(min-content, 400px);
If I needed that type of behavior, I'd probably go with something like this, only because I use this in other places too:
Though now that I look at it, the minmax() is probably easier to understand at first glance.if we're smaller than 400px, there will be no space to distributeI don't quite understand that. Why shouldn't there be any more space? Assuming the container is 399px, then 1fr should simply be equivalent to 399px, shouldn't it? The only problem I see is if the container is e.g. 500px wide, the browser doesn't know what to do because if it takes the 1fr value the box would be 500px, so over the strict maximum of 400px and if it takes the 400px value it would be under the minimum because 1fr > 400px
fr is only additive. If a container is 1000px wide and has 2 columns of 400px each, there is 200px leftover, it then distributes that to each track, so 100px in this example.
If the total width is 600px, but each track is still 400px, there is no leftover or extra space, so there is nothing for it to distribute.
It works like flex-grow would.Sounds complicated! Well, I just have to remember that
<flex> values are invalid as minimum values. Thanks for your help!Think of
fr as free room. How much free room do you have if both columns are 400px and the viewport is only 350px wide? Answer: none. No free room.