<max>

Returns the largest (most positive) value from a list of comma-separated expressions. It is useful for creating layouts that grow but don't shrink below a certain point.

/* Usage Example */
.flexible-box {
  /* Stays at 300px unless the screen is very small, then it uses 50vw */
  width: max(50vw, 300px);
}
Widely available Since 2020 95% global usage

This feature is well established and works across many devices and browser versions. It has been available across browsers since 2020.

79+
75+
11.1+
79+
Kinsta

Your first month is free

Managed WordPress hosting for faster sites.

Learn more

New CSS drops.

Join 600+ readers who've survived clearfix hacks.

ESC