Skip to main content

When to use the min() or max() function

min() or max()? You always struggle to know which one to use and you end up trying both until one of them works.

💡 Here is a figure to help you decide when to use them

You start with clamp() then:

A 3D shine animation on image

If you want to set a max-width to your element then it's min()

width: clamp(min,100%,max)width: min(100%, max)

See the Pen Untitled by Temani Afif (@t_afif) on CodePen.

If you want to set a min value for font-size then it's max()

font-size: clamp(min,5vw,max)font-size: max(min, 5vw)

See the Pen min font-size using max() by Temani Afif (@t_afif) on CodePen.