How to use min() function in CSS

CSS is a styling language that helps us change the appearance of our HTML document. Multiple functions in CSS help us make styling decisions wisely.

min() function

The min() function allows us to set a CSS property value based on the minimum of two values. We can use the min() function to specify the minimum value for properties like width, height, font size, and animation duration. It can also do so where a length, integer, time, percentage, number, frequency, or angle value is accepted.

Usage

It provides flexibility in setting CSS property values giving us more control. It is beneficial in creating responsive layouts and setting property values as the minimum of multiple values based on our available space and circumstances. For example, we can use min() to set the height of an element based on the minimum value between a pixel value and a percentage value. This allows the element to scale responsively based on the available container space.

Support

The following table shows the browser and its versions that support the min() function.

Syntax

The syntax of min() function is following:

• #ElementID: It represents the HTML element's ID we are setting CSS for.

• property: It represents the CSS property we want to apply CSS on, such as width or height etc.

• min(firstValue, secondValue): We use the min() function to set the value of the property. The value of our property will be the minimum of the two values: firstValue and secondValue. We can have more than two arguments as well.

Example

The following code demonstrates how to use the min() function:

Let's understand what happens in the styles.css file:

• Line 1: We specify we are applying CSS to the element with id myDiv.

• Line 2: We set the background color of our element.

• Line 3: We set the height of our element.

• Line 4: We use the min() function to define the width of our element. It takes two arguments: 50% and 100px. The function selects the smaller value between the two. In our case, 100px is smaller than the 50% of our parent container's width, so we set the width to 100px.

Conclusion

The min() function in CSS is a convenient option to set a property's value that is the minimum between two or more values. It helps where our design decisions are based on the available space or desired constraints. We can create responsive and flexible designs using this function.