YouTipFunc Min
## CSS min() Function
The CSS `min()` function is a mathematical function that allows you to set a property value to the smallest (most negative) value from a list of comma-separated expressions.
It is a powerful tool for responsive web design, enabling you to establish a dynamic upper limit (maximum value) for CSS properties like width, height, padding, margin, and font size.
---
## Definition and Usage
The `min()` function accepts one or more comma-separated expressions as its arguments. The browser evaluates these expressions and applies the smallest resulting value to the specified CSS property.
```css
/* Property: min(expression [, expression, ...]) */
width: min(50%, 300px);
```
### How it Works (The "Maximum Limit" Paradox)
Although the function is named `min()`, it is most commonly used to set a **maximum limit** on a property.
* In the example `width: min(50%, 300px)`, the element's width will be `50%` of its parent container.
* However, if `50%` of the container exceeds `300px`, the browser will choose `300px` because it is the smaller value.
* Therefore, the width will **never exceed 300px**. It acts as a responsive alternative to combining `width: 50%` and `max-width: 300px`.
---
## Syntax
```css
min(value1, value2, ...)
```
### Parameter Values
| Value | Description |
| :--- | :--- |
| *value1, value2, ...* | **Required.** A comma-separated list of values or mathematical expressions (using `+`, `-`, `*`, `/`). The browser will calculate and select the smallest value. |
### Supported Units
You can mix different CSS units within the `min()` function:
* **Absolute units:** `px`, `pt`, `cm`, etc.
* **Relative units:** `%`, `em`, `rem`, `vw`, `vh`, etc.
* **Math expressions:** e.g., `min(10vw + 2rem, 80px)`
---
## Code Examples
### Example 1: Responsive Container Width
Set the width of a `div` to be either `50%` of the parent container or `300px`—whichever is smaller.
```css
#div1 {
background-color: lightblue;
height: 100px;
/* The width will be 50%, but capped at a maximum of 300px */
width: min(50%, 300px);
}
```
### Example 2: Multi-Value Comparison
You can pass more than two arguments to the `min()` function.
```css
#div2 {
/* The width will be the smallest of 10vw, 4em, or 80px */
width: min(10vw, 4em, 80px);
}
```
*In this case, the width will never be larger than `80px`. If the viewport width (`10vw`) or the font-relative size (`4em`) evaluates to less than `80px`, the width will shrink accordingly.*
### Example 3: Responsive Padding
Keep padding dynamic on mobile screens but prevent it from getting too large on desktop screens.
```css
.card {
/* Padding will scale with viewport width, but will never exceed 24px */
padding: min(4vw, 24px);
}
```
---
## Browser Support
The numbers in the table specify the first browser version that fully supports the `min()` function.
| Function | Chrome | Edge | Firefox | Safari | Opera |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **min()** | 79.0 | 79.0 | 75.0 | 11.1 | 66.0 |
---
## Key Considerations
1. **Mathematical Operators:** You can perform calculations inside `min()`. For example, `min(50vw - 10px, 500px)`.
2. **No `calc()` Required:** You do not need to nest the `calc()` function inside `min()`. The browser automatically evaluates mathematical expressions inside CSS math functions.
3. **Spacing with Operators:** When using addition (`+`) and subtraction (`-`) operators inside the function, you must surround them with spaces (e.g., `min(10% + 5px, 300px)` instead of `min(10%+5px, 300px)`) so the browser does not misinterpret them as negative/positive unit signs.