CSS' min(), minmax() and max() functions are still taking me some time to get my head around. Mostly because I'm not using them yet but I'm trying to look at them as often as possible in the hope that they click. Their names are counterintuitive to me, but they're usefulness outlays that... I think.
width: max(50vw, 800px);
In this example, the item will be at least 800px wide, but will grow to be 50vw wide. Just like with the min() function, the two properties work together to define how wide an element would be. At some point, 800px an 50vw are the same. With min() we would see the image grow until it hits that point, with max() it is a static size until then. After, it's start growing to fill us much space as possible. CSS treats 1vw as 16px (800 / 50) in this example which means that 100vw would be 1600px.
Click through to the demo on Codepen and resize your browser. You'll see the image is always at least 800px wide and never less than half the size (50vw).
*Small update on using min() and max() in CSS
Since this was originally published on my blog, I have started to use the functions. I think I understand how the work now, although I have to look up which does which each time because the names are confusing to me!
Top comments (0)