If we want to create responsive elements, the min() and max() functions are great solutions for setting case-specific design constraints. The min() function will select the smallest value from a range of values and set that as the associated property’s value. The max() function will select the largest value from a range of values, which will be used as the associated property’s value.

In the code snippet below, the width of the .content class is set to be 50vw. If the viewport width is greater than 1000 pixels (meaning that 50vw will be greater than 500px), the width of the content class will be set to a maximum width of 500px.

.content {
  width: 50vw;
  max-width: 500px;
}

We can simplify the above code using the min() function and passing both values for the width and max-width property as the function’s arguments as follows:

.content {
  width: min(500px, 50vw);
}

Now the min() function chooses the smaller value of two values given as arguments—in other words, the min() function defines the maximum width the content class can have. When the viewport width is smaller than 1000 pixels, the maximum width of the content class is 50vw. When the viewport width is greater than 1000 pixels, the maximum width is 500px.

If we were to replace the min() function in the above example with the max() function, then the width of the content class would be 500px if the viewport with is smaller than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the .content class will take up a minimum of 50vw.

.content {
  width: max(500px, 50vw);
}

Both functions follow a similar syntax—you can pass more than one argument, separated by commas, in no specific order, and each argument can be in different units. The arguments of the functions can be other functions, math expressions, and literal values.