CSS max() Function

CSS max() Function

The CSS max() function compares two or more values or mathematical expressions and returns the largest result.

It is commonly used to create responsive dimensions, establish minimum spacing, and prevent calculated values from becoming too small. The function can compare compatible lengths, percentages, numbers, and other supported CSS numeric values.

Syntax

max(value1, value2)
max(value1, value2, value3, ...)

The function accepts one or more comma-separated calculations and returns the largest value.

For example:

width: max(300px, 50%);
font-size: max(16px, 1.5vw);
padding: max(20px, 3vw);

Each argument can be a CSS numeric value or a compatible mathematical expression.

The result must be valid for the property where the function is used.

For example:

.box {
  width: max(200px, 40vw);
}

The browser compares 200 pixels with 40% of the viewport width and uses whichever is larger.

The max() function is part of the CSS mathematical functions and can be used wherever its resulting numeric type is accepted.

Parameters

The max() function accepts one or more arguments.

Although a single argument is valid, the function is most useful when comparing at least two values.

For example:

max(10px, 20px, 30px)

The result is 30 pixels.

Arguments must have compatible numeric types. For example, lengths and percentages can be compared in properties that support length-percentage calculations.

Unrelated types, such as a length and an angle, cannot be compared.

How It Works

The browser evaluates each argument and selects the largest result.

For example:

max(10px, 25px)

The result is 25 pixels.

Another example:

max(12px, 20px, 16px)

The result is 20 pixels.

When values depend on the viewport or another layout measurement, the selected result can change as the available space changes.

For example:

width: max(300px, 50vw);

At a viewport width of 400 pixels, 50vw equals 200 pixels, so the result is 300 pixels.

At a viewport width of 800 pixels, 50vw equals 400 pixels, so the result is 400 pixels.

This allows CSS values to respond to changing conditions without requiring media queries.

Comparing Length Values

The max() function can compare CSS length values, including different length units.

For example:

.box {
  width: max(200px, 15rem);
}

The browser resolves both lengths and uses the larger value.

If the root font size is 16 pixels, 15rem equals 240 pixels, so the resulting width is 240 pixels.

Another example:

.box {
  padding: max(12px, 1.5rem);
}

With a root font size of 16 pixels, 1.5rem equals 24 pixels, so the padding is 24 pixels.

Relative units such as rem and em can help calculations respond to font-size settings.

Using Percentages

Percentages can be compared with lengths when the property supports compatible length-percentage calculations.

For example:

.box {
  width: max(250px, 60%);
}

The browser compares 250 pixels with 60% of the relevant containing block's width.

If the containing block is 300 pixels wide, 60% equals 180 pixels, so the result is 250 pixels.

If the containing block is 600 pixels wide, 60% equals 360 pixels, so the result is 360 pixels.

Percentages do not always refer to the same measurement. Their meaning depends on the CSS property.

For example, percentage padding is generally based on the containing block's width, even when applied vertically.

Check the property definition when using percentages in mathematical functions.

Using Viewport Units

Viewport-relative units make max() useful for responsive design.

For example:

.heading {
  font-size: max(20px, 3vw);
}

The font size is never smaller than 20 pixels, but it can increase when 3% of the viewport width exceeds that value.

Another example:

.section {
  padding: max(24px, 4vw);
}

The padding remains at least 24 pixels and increases on wider viewports.

Modern viewport units such as svw, lvw, and dvw can also be used where supported.

For example:

.panel {
  padding-inline: max(16px, 3dvw);
}

Viewport-based sizing should be used carefully because a large viewport can produce unexpectedly large dimensions.

Use clamp() when both minimum and maximum limits are needed.

Comparing Multiple Values

The max() function can compare more than two arguments.

For example:

width: max(200px, 30vw, 20rem);

The browser evaluates all three values and selects the largest.

With a 16-pixel root font size, 20rem equals 320 pixels.

At a viewport width of 600 pixels, 30vw equals 180 pixels, so the result is 320 pixels.

At a viewport width of 1200 pixels, 30vw equals 360 pixels, so the result is 360 pixels.

Another example:

margin-top: max(10px, 2rem, 5vh);

The largest resolved length determines the top margin.

Using several arguments can be useful when a value must satisfy multiple minimum requirements.

Nested Calculations

The max() function can contain arithmetic expressions and other CSS mathematical functions.

For example:

width: max(200px, 50% - 20px);

The browser compares 200 pixels with half the relevant containing block's width minus 20 pixels.

The function can also be nested inside calc():

width: calc(max(200px, 40vw) + 20px);

This selects the larger value and adds 20 pixels.

Another example uses min():

width: min(800px, max(300px, 70%));

This expression attempts to keep the selected width at least 300 pixels while limiting it to 800 pixels.

CSS mathematical functions can also use custom properties:

:root {
  --minimum-width: 250px;
}
.box {
  width: max(var(--minimum-width), 50%);
}

Changing the custom property updates the minimum width used in the calculation.

The calc() wrapper is optional for many arithmetic expressions inside max(), because the function already supports calculations.

max() vs. min()

The max() and min() functions perform opposite comparisons.

For example:

.box-a {
  width: max(300px, 50%);
}
.box-b {
  width: min(300px, 50%);
}

The first box uses whichever width is larger. The second uses whichever width is smaller.

Both functions are useful for responsive layouts, but they impose different kinds of limits.

max() vs. clamp()

The clamp() function combines minimum, preferred, and maximum values into one expression.

For example:

font-size: clamp(16px, 3vw, 32px);

This keeps the calculated font size between 16 and 32 pixels.

By comparison:

font-size: max(16px, 3vw);

This establishes a minimum of 16 pixels but does not impose a maximum.

Use max() when only a lower limit is needed, min() when only an upper limit is needed, and clamp() when both limits are required.

Example

This example uses max() to select the larger of two fixed width values.

HTML:

<div class="max-demo">
  <div class="max-demo-box">max(180px, 260px)</div>
</div>

CSS:

.max-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.max-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: max(180px, 260px);
  max-width: 100%;
  min-height: 65px;
  padding: 10px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
}

The max() expression selects 260 pixels because it is larger than 180 pixels.

The additional max-width: 100% declaration allows the rendered box to shrink if its container is narrower than the calculated width.

Responsive Sizing Example

This example uses max() to create padding that remains at least 20 pixels but increases on wider viewports.

HTML:

<div class="max-responsive-demo">
  <div class="max-responsive-content">
    Responsive Padding
  </div>
</div>

CSS:

.max-responsive-demo {
  padding: max(20px, 4vw);
  background-color: #f1f3f5;
  border: 1px solid #dddddd;
}
.max-responsive-content {
  padding: 20px;
  background-color: #0066cc;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
}

At a viewport width of 400 pixels, 4vw equals 16 pixels, so the outer padding is 20 pixels.

At a viewport width of 1000 pixels, 4vw equals 40 pixels, so the outer padding increases to 40 pixels.

The calculation uses the viewport width, not the width of the Browser Result container.

Common Uses

The max() function is useful when a CSS value should not fall below a calculated minimum.

For example:

.section {
  padding-block: max(24px, 3vw);
}
.heading {
  font-size: max(1.25rem, 2vw);
}
.panel {
  min-height: max(200px, 30vh);
}

These declarations establish lower limits while allowing values to increase when relative measurements become larger.

Use the function when the comparison itself is important. For a simple fixed minimum, properties such as min-width or min-height may be clearer.

Limitations

The max() function has several important rules and limitations.

• At least one argument is required.
• Arguments must be separated by commas.
• All arguments must have compatible numeric types.
• The result must be valid for the property receiving it.
• Percentages are resolved according to the relevant property's rules.
• The function does not automatically impose an upper limit.
• Large viewport-relative values can cause oversized elements or text.
• Other property constraints, such as max-width, can still affect the final used size.
• Some percentage-based calculations depend on layout information that is unavailable until later stages of rendering.

For example, this is valid:

width: max(200px, 50%);

The following is invalid because the arguments have incompatible types:

width: max(200px, 30deg);

The following is also invalid because no argument is supplied:

width: max();

Remember that max() chooses the largest argument, but it does not guarantee that the resulting element will fit inside its container.

Browser Support

The CSS max() function is Baseline Widely available and is supported by modern versions of Chrome, Edge, Firefox, Safari, and other major browsers.

For example:

.box {
  width: max(250px, 50%);
}

Older browsers may not recognize the function. When compatibility is important, provide a fallback declaration:

.box {
  width: 250px;
  width: max(250px, 50%);
}

Browsers supporting max() use the calculated value, while unsupported browsers retain the fallback width.

For current compatibility information, visit Can I Use? and search for CSS min() max() and clamp().

Specifications

The max() function is defined in the CSS Values and Units Module Level 4 .

The specification defines how comparison functions evaluate compatible CSS numeric values and mathematical expressions.

Related CSS functions include min(), clamp(), and calc().