The min() CSS function lets you set the smallest (most negative) value from a list of comma-separated expressions as the value of a CSS property value. The min() function can be used anywhere a <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> is allowed.

/* property: min(expression [, expression]) */
width: min(10vw, 4em, 80px);

In the above example, the width will be at most 80px, but will be smaller if the the viewport is less than 800px wide, or an em is less than 20px wide. In other words, the maximum width is 80px. Think of the min() value as providing the maximum value a property can have.


The min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value result used as the value.

The expressions can be math expressions (using arithmetic operators), literal values, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>).

You can use different units for each value in your expression, if you wish. You may also use parentheses to establish computation order when needed.


  • Math expressions involving percentages for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables may be treated as if auto had been specified.
  • It is permitted to nest max() and other min() functions as expression values. The expressions are full math expressions, so you can use direct addition, subtraction, multiplication and division without using the calc() function itself.
  • The expression can be values combining the addition ( + ), subtraction ( - ), multiplication ( * ) and division ( / ) operators, using standard operator precedence rules. Make sure to put a space on each side of the + and - operands. The operands in the expression may be any <length> syntax value.
  • You can (and often need to) combine min() and max() values, or use min() within a clamp() or calc() function.
  • You can provide more than two arguments, if you have multiple constraints to apply.

Formal syntax

min( <calc-sum># )

<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*

<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*

<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )


Growing images to a maximum size

min() makes it easy to set a maximum width for an image. In this example, the CSS creates a logo that stretches halfway across the window on smaller devices, but does not exceed 300px on wider devices, without the use of media queries:

.logo {
  width: min(50vw, 300px);
<img src="https://developer.mozilla.org/static/img/web-docs-sprite.svg" alt="MDN Web Docs" class="logo">

In this example, the logo will be 300px wide unless the viewport narrows below 600px, at which point it will shrink as the viewport shrinks, always being 50% of the width of the viewport.

Setting a maximum size for a label and input

Another use case for CSS functions is to set a maximum size on responsive form controls: enabling the width of labels and inputs to shrink as the width of the form shrinks.

Let's look at some CSS:

input, label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;

Here, the form itself, along with the margin, border, and padding, will be 100% of its parent's width. We declare the input and label to be the lesser of 40% of the form width up to the padding or 400px wide, whichever is smaller. In other words, the widest that the label and input can be is 400px. The narrowest they will be is 40% of the form's width, which on a smartwatch's screen is very small.

  <label>Type something:</label>
  <input type="text">

Accessibility concerns

When using min() to set a maximum font size, ensure that the font can still be scaled at least 200% for readability (without assistive technology like a zoom function).


Specification Status Comment
CSS Values and Units Module Level 4
The definition of 'min()' in that specification.
Editor's Draft Initial definition.

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
<min()>Chrome Full support 79Edge Full support 79Firefox Full support 75IE No support NoOpera Full support 66Safari Full support 11.1WebView Android Full support 79Chrome Android Full support 79Firefox Android No support NoOpera Android No support NoSafari iOS Full support 11.3Samsung Internet Android No support No


Full support  
Full support
No support  
No support

See also