Home >CSS >CSS reference – properties, selectors, functions >max()

max()

max(value1, value2, …)

Uses the largest value from the list. It suits places where a value grows with the width or the font, but must not drop below a sensible minimum: font-size: max(16px, 1.2vw) will never be smaller than 16 px.

Values

Any number of values separated by commas; inside, you can calculate as in calc().

Examples

The padding is 5% of the width of the box, but at least 16 px – it does not disappear in a narrow box:

<div class="box wide">A wide box</div>
<div class="box narrow">Narrow</div>

.box {
  box-sizing: border-box;
  margin-bottom: 8px;
  padding: max(16px, 5%);
  background: #fff3e0;
}
.wide { width: 400px; }
.narrow { width: 120px; }

result

A wide box

Narrow

Things to watch out for

max() sets a lower limit – it does the same as min-width or min-height. An upper limit is given by min(), both at once by clamp().
For a font in viewport units (vw) a lower limit is not enough: the text then does not react to zooming the page. Add rem to the calculation (max(1rem, 0.8rem + 1vw)).
Support: Chrome since 79, Firefox since 75, Safari since 11.1.

Browser support

Baseline – widely available: in all major browsers since July 2020, considered widely available since January 2023. Since version: Chrome 79, Firefox 75, Safari 11.1. As of October 2026 (MDN browser-compat-data).