min()

The CSS min() function takes two or more comma-separated arguments of spacing values, evaluates them, and returns the smallest value of the bunch.

.element {
  width: min(80%, 800px); /* The lowest value is returned */
}

This function helps create responsive designs by adjusting properties like width, height, and font-size dynamically based on which value is smallest in that specific context. It accepts any comparable value you provide to it as arguments, including absolute lengths, relative lengths, calculated expressions using calc(), a combination of absolute and relative units, and numbers for CSS properties that accept numerical values, e.g. flex.

This CSS function is a working draft of the CSS Values and Units Module Level 4 specification with other related functions, like max() and clamp().

Syntax

min(value1, value2, ...);

The min() function takes two or more arguments — think lengths (e.g., px, em, rem), percentages (i.e., %), viewport units(e.g., vw, vh), or even calculations with calc() or keywords, like max-content and min-content. It compares them all and picks the smallest value, whichever that is at render time.

Example

The following example sets an element with a class of .container to 80% of its parent’s width, but it will never exceed 600px. So, if the parent’s width is 1000px, then 80% of that equals 800px, which is greater than the second argument at 600px, and as a result, the .container width becomes 600px.

.container {
  width: min(80%, 600px);
  margin: 0 auto;
  background: #f0f0f0;
  padding: 20px;
}

But let’s say the parent’s width is 700px. In that case, 80% of 700px equals 560px, which is less than the second argument at 600px, and as a result, the .container width becomes 560px. The lesser of the two values is what gets returned, depending on the context.

Basic usage

Now that we’ve seen how min() can improve responsive design, let’s get our hands on it to see how it works. It fits anywhere a length or numeric value is accepted, such as the width, height, padding, font-size properties, you name it.

Here’s a quick example that caps a button’s width at either 50% of its parent’s width or 200px, whichever is less.

.button {
  width: min(50%, 200px); /* Scales to 50%, maxes at 200px */
  padding: 10px;
  background: #3498db;
  color: white;
  text-align: center;

  &:hover {
    width: min(60%, 220px); /* Slightly wider, still capped */
  }
}

Resize the following demo to see how the button adjusts its width when the parent container is less than 200px wide:

Adjusting the percentage shifts the size fluidly while the fixed cap keeps it under control — perfect for responsive buttons or compact UI elements. Notice that I’ve applied min() to the button’s :hover state as well, which will further adjust the button’s width when the cursor hovers above it.

Capping typography

Text font sizes can get extra large as the viewport increases using relative units. This behaviour can be capped with the min() function:

.heading {
  font-size: min(5vw, 48px); /* Grows with viewport, caps at 48px */
  line-height: 1.2;
}

This keeps your headings bold and readable without turning them into billboards on ultra-wide displays. The min() function ensures that typography stays proportional yet restrained.

Flexible spacing

Control padding or margins without breaking layouts:

.card {
  padding: min(5%, 20px); /* Scales with container, maxes at 20px */
  background: #f9f9f9;
  border-radius: 8px;
}

On a narrow screen, the padding shrinks gracefully; on a wide one, it stops at 20px. This keeps spacing consistent and prevents awkward gaps in tight or oversized containers.

Dynamic grid columns

Make grid layouts adapt without overflowing:

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 25%), 1fr));
  gap: 10px;
}

Here, min(150px, 25%) ensures each column is at least 150px wide but scales down to 25% of the container if that’s smaller. It’s a slick way to balance flexibility and structure in responsive grids.

Math with min()

Use calc() to fine-tune constraints dynamically:

.section {
  width: min(90%, calc(800px - 2rem)); /* Caps at 800px minus padding */
  margin: 0 auto;
  background: #e0e0e0;
}

Or adjust based on custom properties:

:root {
  --base-height: 500px;
}

.box {
  height: min(var(--base-height), calc(100vh - 50px));
}

This lets min() play nicely with variables or viewport math, giving you precise control over responsive elements.

min() vs. media queries

In responsive design, min() can sometimes replace media queries for simpler, smoother adjustments. Media queries apply styles at specific breakpoints — say, max-width: 600px — but they are all-or-nothing. Meanwhile, min() gives you fluid control in a single line.

Take this media query, for example:

.container {
  width: 80%;
}

@media (max-width: 600px) {
  .container {
    width: 100%;
  }
}

With min(), you could rewrite it as:

.container {
  width: min(80%, 600px);
}

Here, min() scales the width dynamically, capping it at 600px without a hard switch. As Juan Diego Rodríguez notes in Smashing Magazine, this reduces code and avoids breakpoint maintenance. It is not a full replacement. Media queries still rule for layout shifts or complex conditions. But for sizing constraints, min() often is more elegant and “linear,” adapting seamlessly as the viewport changes.

Here’s a stack up of CSS min() against media queries:

	min()	Media queries
Purpose	Sets a dynamic value based on the smallest of multiple options	Applies styles conditionally based on viewport or device conditions
Syntax example	width: min(80%, 600px);	@media (max-width: 600px) { width: 100%; }
Behavior	Fluidly adjusts in real-time as the viewport changes	Triggers discrete style changes at specific breakpoints
Granularity	Smooth, continuous scaling within constraints	Binary “on/off” switch at defined thresholds
Use case	Best for sizing limits (e.g., capping width or font-size)	Ideal for layout shifts or complex conditional styling
Code complexity	Single-line solution, less CSS to maintain	Requires separate blocks, more verbose for simple adjustments
Performance	Evaluated dynamically by the browser, no reflows	May cause reflows when breakpoints are hit
Limitations	Limited to numeric comparisons; no structural changes	Can handle any CSS property or layout tweak

Browser support

CSS min() has been supported in all modern browsers (Chrome, Firefox, Safari, Edge) since 2019–2020. However, there is no love from Internet Explorer. If you need a fallback, use a static value before the min() declaration as in the code block below:

width: 500px; /* Fallback */
width: min(80%, 500px);

More information

• CSS min() all the things (Victor Ayomipo)
• Use cases for CSS comparison functions (Ahmad Shadeed)
• CSS min(), max(), and clamp() (web.dev)

Related