CSS min() Function

The CSS min() comparison function allows to set the smallest value from a set of given values. That can then be used as the value for the given CSS property name.

#logo-img {
	width: min(50vw, 200px);
}

In the above example, we are trying to set the width of a logo image that can adapt to various devices. Using min(), the width is set as the minimum of 200px and 50vw. For bigger screens, 200px < 50vw, so min() returns 200px. For small devices, 50vw < 200px, so min() returns 50vw.

min() can accept multiple comma separated values as parameters. Values can be in different units.

Browser Compatibility

Tutorials & Resources

• CSS min() on MDN