References

Beginner-friendly references for web development, with live, editable examples.

The CSS max() function

Function CSS All modern browsers Updated
Quick answer

The CSS max() function returns the largest of its arguments, e.g. max(50%, 300px). Because the larger value wins, it enforces a minimum — the element is 50% wide but never narrower than 300px — so it works like a min-width you can use in any property. It accepts mixed units and basic math.

Overview

max() returns the largest of a comma-separated list of values, which means it sets a minimum. max(50%, 300px) resolves to whichever is bigger, so the element can grow with its percentage but never shrinks below 300px — the inline equivalent of a min-width.

A common, practical use is fluid spacing with a safety floor: padding: max(2vw, 16px) scales the padding with the viewport but guarantees at least 16px, so it never collapses to nothing on small screens. That floor pattern shows up all over responsive design.

Like its partner min(), it mixes units and supports math, and the pair of them is exactly what clamp() combines when you need both a floor and a ceiling.

Syntax

/* fluid padding, never below 16px */
.section {
  padding: max(4vw, 16px);
}

Example

Live example 
<style>
  .section {
    padding: max(6vw, 18px);
    background: #6d28d9;
    color: #fff;
    border-radius: 10px;
    font: 15px/1.5 system-ui, sans-serif;
  }
</style>
<div class="section">padding: max(6vw, 18px) — scales with the screen, but never below 18px.</div>

Best practices

  • Remember max() sets a minimum — the larger value wins, so it behaves like a min-width or min-height.
  • Use it for fluid spacing with a floor, e.g. padding: max(4vw, 16px), so spacing never collapses on small screens.
  • Mix units the same way you would in calc(), e.g. max(50%, 320px).
  • Combine it with min(), or reach for clamp() when you need both bounds.

Frequently asked questions

What does the CSS max() function do?
It returns the largest of its arguments. Because the larger value wins, it enforces a minimum — max(50%, 300px) is at least 300px.
Why does max() set a minimum size?
It picks the larger value, so a fixed value acts as a floor that the element cannot drop below, the same effect as a min-width.
How do I keep fluid padding from getting too small?
Use max(), e.g. padding: max(4vw, 16px). The padding scales with the viewport but never goes below 16px.
What is the difference between max() and min()?
max() returns the largest value (a minimum floor); min() returns the smallest (a maximum cap).
linear-gradient() min()