min() CSS Function

Description

The CSS min() function returns the smallest value from a list of comma-separated values. It can take any number of arguments, and the browser will return the smallest one. The arguments can be any valid CSS value, including lengths, percentages, numbers, and angles.

The min() function can be used to ensure that an element has a minimum size, or to set a maximum size for an element based on the size of its container. For example, you could use the min() function to set the width of an image to be at least 200px, or to set the height of a header to be at least 10% of the viewport height.

Here is an example of how to use the min() function to set the minimum width of an image:

img {
  min-width: min(200px, 50%);
}

This code will ensure that the image is at least 200px wide, but it can be wider if the container is wider than 400px.

Here is another example of how to use the min() function to set the maximum height of a header:

header {
  max-height: min(10vh, 200px);
}

This code will ensure that the header is at most 10% of the viewport height, but it can be shorter if the header content is shorter than 200px.

Syntax

<min()> = min( value1, value2, ... ) 

Values

• value1, value2, ...A list of comma-separated values - where the lowest value is chosen. Required.

Example

<h1>The min() Function</h1>



<p>Use min() to set the width of #div1 to whichever value is smallest, 50% or 300px:</p>



<div id="div1">Some text...</div>



<p>Resize the browser window to see the effect.</p>

#div1 {

  background-color: yellow;

  height: 100px;

  width: min(50%, 300px);

}

Browser Support

The following table will show you the current browser support for the CSS min() function.

Desktop
79	79	75	66	11.1

Tablets / Mobile
79	79	57	11.3	12	79

Last updated by CSSPortal on: 7th October 2023