CSS max() Function

CSS max() Function

The CSS max() function compares two or more values and uses the largest result. It is useful when a dimension or spacing value should remain flexible but must not become smaller than a preferred amount.

The values supplied to max() can use different compatible units and can include mathematical expressions, custom properties, and other CSS math functions.

max() Syntax

The max() function accepts two or more comma-separated values or expressions.

property: max(value1, value2);

For example, an element can use whichever width is larger: 50% of the available width or 300px.

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

If 50% resolves to less than 300px, the width is 300px. If 50% resolves to more than 300px, the percentage value is used.

How max() Works

The browser evaluates each expression passed to max() and selects the largest result.

.box {
  width: max(40%, 400px);
}

If 40% resolves to 320px, the resulting width is 400px because it is the larger value.

If 40% resolves to 500px, the resulting width is 500px.

This allows a value to respond to available space while maintaining a lower size limit.

Comparing Two Values

A common use of max() is comparing a flexible value with a fixed minimum value.

.panel {
  width: max(50%, 350px);
}

The panel can grow as the percentage increases, but the result selected by max() will never be less than 350px.

Remember that forcing a minimum width can cause horizontal overflow when the available space is narrower than that minimum. Responsive designs should account for the size of the containing block and viewport.

Comparing Multiple Values

The max() function can compare more than two compatible values.

.box {
  width: max(40%, 20rem, 300px);
}

The browser evaluates all three arguments and uses whichever produces the largest result in the current context.

Multiple arguments can be useful when several constraints affect a value, but simpler expressions are generally easier to understand and maintain.

Using Different Units

The arguments passed to max() can use different units when their values are compatible with each other.

.content {
  width: max(50vw, 30rem);
}

The browser resolves the viewport-relative and root-font-relative values and uses whichever is larger.

Other useful combinations can include percentages, pixels, em, rem, viewport units, and calculated expressions.

.section {
  padding-inline: max(20px, 4vw);
}

The inline padding remains at least 20px but can become larger as the viewport-based value increases.

Responsive Sizing

The max() function can provide a responsive value while establishing a lower limit.

.sidebar {
  width: max(25%, 240px);
}

When 25% is smaller than 240px, the fixed value is selected. When the percentage becomes larger, the sidebar can grow with its containing block.

This can be useful when an element needs enough room for its content but should still participate in a flexible layout.

Responsive Spacing

The max() function is also useful for spacing that should scale while maintaining a minimum amount.

.section {
  padding-block: max(30px, 5vw);
}

On smaller viewports, 30px may be the larger value. As the viewport becomes wider, 5vw can become larger and increase the spacing.

The same approach can be used with margins and other properties that accept compatible length or percentage values.

max() with Custom Properties

Custom properties can provide values to max(), allowing design constraints to be defined separately from the declarations that use them.

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

Changing --minimum-width updates the lower size limit wherever the custom property is used.

Custom properties can also be used for both sides of the comparison.

:root {
  --flexible-width: 50%;
  --minimum-width: 300px;
}
.card {
  width: max(var(--flexible-width), var(--minimum-width));
}

max() with Calculations

Mathematical expressions can be used directly as arguments to max().

.content {
  width: max(50%, 300px + 2rem);
}

The browser evaluates the mathematical expression and compares its result with the other argument.

The calc() function can also be nested when it makes the expression easier to read.

.content {
  width: max(50%, calc(300px + 2rem));
}

Both forms allow a calculated value to participate in the comparison.

max() and min-width

A traditional way to give an element a flexible width with a minimum limit is to combine width and min-width.

.content {
  width: 50%;
  min-width: 300px;
}

In some situations, max() can express a similar size choice in one declaration.

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

These approaches are not interchangeable in every sizing situation because width and min-width participate differently in CSS sizing. Use the form that most clearly represents the intended layout constraint.

max() Practices

CSS max() Example

The following example gives a box a width of either 50% or 300px, whichever is larger.

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

Drag the divider between the code and result panes to change the preview width. On a narrow preview, 300px is the larger value. On a wider preview, the percentage can become larger and the box grows with the available space.