What Are CSS min, max, and clamp Functions?

CSS comparison functions—min(), max(), and clamp()—allow developers to create fluid, dynamic, and responsive designs without relying heavily on media queries. While min() selects the smallest value from a list of arguments and max() selects the largest, clamp() combines both behaviors by locking a value between an explicit minimum and maximum boundary. Together, these mathematical functions streamline responsive typography, flexible spacing, and adaptive layout sizing.

The CSS min() Function

The min() function accepts one or more comma-separated expressions and applies the smallest value among them. Despite its name, min() acts as a maximum threshold (an upper cap) for a given property because the computed value will never exceed the smallest option provided.

.container {
  width: min(100%, 800px);
}

In this example, the container will scale to 100% of the parent's width on small screens, but it will never grow larger than 800px on wider screens. It replaces the traditional pattern of writing width: 100%; max-width: 800px;.

The CSS max() Function

The max() function selects the largest value from a set of comma-separated expressions. Counterintuitively, it functions as a minimum threshold (a lower floor), ensuring that a property never shrinks below the specified minimum limit.

.hero-text {
  margin-top: max(2rem, 5vh);
}

In this scenario, the top margin will adjust dynamically to 5vh on tall screens, but it will never drop below 2rem on shorter viewports. This replaces the need for a separate min-height or media query override.

The CSS clamp() Function

The clamp() function takes three arguments in a defined order: a minimum value, a preferred (ideal) value, and a maximum value. The syntax follows this structure:

clamp(MIN, PREFERRED, MAX)

The browser prioritizes the preferred value as long as it stays between the defined limits. If the preferred value evaluates to less than the minimum, the minimum is applied; if it grows larger than the maximum, the maximum is applied. Functionally, clamp(MIN, VAL, MAX) is equivalent to writing max(MIN, min(VAL, MAX)).

.responsive-heading {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

In this example, the heading text scales dynamically with the viewport width at 4vw, but it will never shrink below 1.5rem on mobile devices or expand beyond 3rem on large desktop displays.

Key Differences and Comparison

Understanding these distinctions makes modern CSS layouts significantly more concise, reducing code duplication and keeping styles maintainable.