max() CSS Function

The max() CSS function allows you to calculate the largest value from a list of two or more expressions. It is particularly useful when you want to define responsive sizes that adapt to different screen widths or conditions, ensuring a property never falls below a certain minimum. Unlike simple fixed values, max() can take relative units like percentages, viewport units, or other functions such as clamp() to create flexible layouts.

This function is often used with font-size, width, height, and margin to combine fixed and relative values. For example, you could ensure that a paragraph text never shrinks below 16px but can scale with the viewport width:

p {
  font-size: max(16px, 2vw);
}

Here, the browser will choose the larger value between 16px and 2vw, meaning on very small screens the font stays at 16px, but on larger screens it can grow proportionally.

Another practical use is for layout elements that should maintain a minimum size:

div.container {
  width: max(300px, 50%);
}

In this case, the container will be at least 300px wide, but can expand to 50% of its parent if that is larger.

The max() function can accept any number of comma-separated expressions and supports calculations using calc(). It helps create more robust, responsive designs without resorting to media queries for simple minimum thresholds.

It’s important to note that all units within max() must be compatible for meaningful comparisons; mixing incompatible units (like px and em in some contexts) may yield unexpected results.