The CSS max() function Learning more about how to size elements using CSS functions

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.

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).