I think I finally understand the CSS min() and max() functions!

I was thinking about a few projects this week that I'd like to make some progress on and it finally hit me. I wasn't even thinking about a specific problem that needed solving, only that I'd like to come up with a layout that would make use of the min() and max() functions.

I've written about both min() and max() in an effort to better understand them but both felt like they were a little bit of a mystery to me.

As I've said previously, the names actually sounded counterintuitive to me because of how they work. To me, max() felt like it described something that can grow but it actually a restrictor and the opposite is true of min.

So now that I've that lightbulb moment, I wanted to put it down in writing so I never forget.

min()

min() is the minimum size something should be:

The first argument defines the size you actually want it to be when there's enough space available. The second argument describes how small something can get. The minimum. No smaller. At least this size.

I've labelled the second argument atLeast because this is how I've been thinking about it this week. The item should be at least this size but ideally it will be the size specified.

max()

max() is the maximum size something should be:

The first argument defines the size you actually want it to be when there's not enough space available. The second argument describes how big something should get. The maximum. No bigger. At most this size.

Again, the second argument is labelled atMost because at most the item should be this size, but ideally it will be the size specified.

I'm really pleased I have these concepts set in my mind now. It will make using them so much easier in the future... I just need to remember the order of the arguments and still need to get a better handle on both clamp() and minmax()!