CSS min() Function: What It Is and How to Use It

The min() function in CSS takes two or more values and returns the smallest one. It helps create flexible layouts by choosing the minimum size from a list of options, useful for responsive design.

How It Works

The min() function in CSS compares multiple values and picks the smallest one to use. Think of it like choosing the smallest box to fit inside a shelf. This helps keep elements from getting too big.

For example, if you want a box to be no wider than 300 pixels but also want it to shrink on smaller screens, you can use min(300px, 50%). This means the box will be 50% of the container width or 300 pixels, whichever is smaller.

This function works with any CSS length units like pixels, percentages, rems, and even calc() expressions, making it very flexible for responsive layouts.

Example

This example shows a box that uses min() to stay smaller than 300 pixels but also shrink on smaller screens.

css

div {
  width: min(300px, 50%);
  background-color: lightblue;
  padding: 1rem;
  border: 2px solid blue;
  font-size: 1.2rem;
  text-align: center;
  margin: 1rem auto;
}

Output

A light blue box centered on the page with text inside. The box width is the smaller of 300 pixels or half the page width, so it shrinks on small screens but never gets wider than 300px.

When to Use

Use min() when you want to limit the size of an element but still allow it to shrink on smaller screens. It is great for responsive design where fixed sizes can cause layout problems.

Common use cases include:

• Setting max widths that adapt to screen size
• Combining fixed and relative units for flexible spacing
• Controlling font sizes or container sizes to avoid overflow

It helps keep your design neat and readable on all devices without complex media queries.

Key Points

• min() returns the smallest value from its arguments.
• Works with any CSS length units and expressions.
• Helps create flexible, responsive layouts.
• Can be combined with max() and clamp() for advanced sizing.
• Supported in all modern browsers.

Key Takeaways

min() picks the smallest value from multiple CSS values.

It is useful for making elements responsive and flexible in size.

You can mix fixed units like pixels with relative units like percentages.

Use it to prevent elements from becoming too large on wide screens.

It works well with other CSS functions like max() and clamp().