Getting my head around the CSS minmax() function

I recently took a look at the min() function in CSS, I expected to move on to the max() function but came across the minmax() function which looked like it was worth diving in to.

Getting my head around this function seems to be a lot easier. For one, you simply specify a min and a max value (in that order) and then CSS will use those values to make it at least the minimum size, but no bigger than the maximum size. The one caveat to that is when max < min and then the function falls back to the minimum value.

When is max < min?

You might be wondering when exactly the max value could be smaller than the min value. You could of course specify that explicitly with the lengths you choose but it's more likely to be a scenario where the keywords min-content or max-content are used.

If you use max-content, the box will stretch to fit the content stretching to the maximum size needed. min-content will take opportunities to line break as often as it can, being the minimum size required to keep a full-word on a single line.

If you combine this with the minmax() function, you end up with the ability to grow dynamically with your content (or in spite of it).

min(), minmax(), max(), clamp()

For responsive content, it's another really useful function that now comes native to CSS and I'll be looking at both max() and clamp() in the coming weeks.

Once I've covered them all, I will look at putting an interface together that max really good use of them for the layout and for typography.