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(1vw, 4em, 80px);
In the above example, the width will be at most 80px, but will be narrower if the the viewport is less than 800px wide, or an em is less than 20px wide. In other words, the max-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 expresstions can be math functions (see calc()
for more information), 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.
auto
had been specified.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.<length>
syntax value. You can use different units for each value in your expression. You may also use parentheses to establish computation order when needed.min()
and max()
values, or use min()
within a clamp()
or calc()
function.min( <calc-sum># )where
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*where
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*where
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )
min()
makes it easy to set a maximum width for an image. In this example, the CSS creates a logo that stretches half way across the window on smaller devices, but does not 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.
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 it's 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, or max-width, the label and input will be is 400px. The narrowest they will be is 40% of the form's width, which on a watch is going to be very small.
<form> <label>Type something:</label> <input type="text"> </form>
Think of the min()
function as finding the maximum value allowed for a property.
When min()
is used for controlling text size, make sure the text is always large enough to read. A suggestion is to use the min() function nested within a max()
that has as its second value a relative length unit that is always large enough to read. For example:
small { font-size: max(min(0.5vw, 0.5em), 1rem); }
This ensures a minimum size of 1rem, with a text size that will scale if the page is zoomed.
Specification | Status | Comment |
---|---|---|
CSS Values and Units Module Level 4 The definition of 'min()' in that specification. | Editor's Draft | Initial definition. |
Desktop | ||||||
---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | |
Basic support | ? | ? | ? | ? | ? | ?
|
Mobile | |||||||
---|---|---|---|---|---|---|---|
Android webview | Chrome for Android | Edge Mobile | Firefox for Android | Opera for Android | iOS Safari | Samsung Internet | |
Basic support | ? | ? | ? | ? | ? | ?
|
? |
© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/min