CSS min() Function

CSS min() Function

The CSS min() function compares one or more numeric values or mathematical expressions and returns the smallest result.

It is commonly used for responsive widths, flexible spacing, and typography. By selecting the smaller of fixed and relative values, min() can prevent calculated dimensions from becoming too large without requiring media queries.

Syntax

min(value1)
min(value1, value2)
min(value1, value2, value3, ...)

The function accepts one or more comma-separated calculations and selects the smallest value.

For example:

width: min(600px, 90%);
font-size: min(24px, 3vw);
padding: min(40px, 5vw);

Each argument can be a compatible CSS numeric value or mathematical expression.

The resulting value must be accepted by the property where the function is used.

For example:

.container {
  width: min(800px, 90%);
}

The browser compares 800 pixels with 90% of the relevant containing block's width and uses whichever is smaller.

The min() function can be used directly in supported CSS property values without wrapping it in calc().

Parameters

The min() function accepts one or more arguments.

Although one argument is valid, the function is most useful when comparing two or more values.

For example:

min(10px, 20px, 30px)

The result is 10 pixels.

Arguments must have compatible numeric types. Lengths and percentages can be compared in properties that accept length-percentage calculations.

Unrelated types, such as a length and an angle, cannot be compared.

How It Works

The browser evaluates each argument and selects the smallest result.

For example:

min(10px, 25px)

The result is 10 pixels.

Another example:

min(12px, 20px, 16px)

The result is 12 pixels.

When arguments depend on layout measurements, the selected value can change as the viewport or containing block changes.

For example:

width: min(500px, 80vw);

At a viewport width of 400 pixels, 80vw equals 320 pixels, so the result is 320 pixels.

At a viewport width of 1000 pixels, 80vw equals 800 pixels, so the result is 500 pixels.

This makes min() useful for creating responsive dimensions with an upper limit.

Comparing Length Values

The min() function can compare different CSS length units.

For example:

.box {
  width: min(300px, 20rem);
}

If the root font size is 16 pixels, 20rem equals 320 pixels, so the resulting width is 300 pixels.

Another example:

.box {
  padding: min(24px, 1rem);
}

With a root font size of 16 pixels, the padding is 16 pixels.

Relative length units are resolved according to their normal CSS rules before the comparison determines the selected value.

For example, em depends on the relevant font size, while rem depends on the root element's font size.

Using Percentages

Percentages can be compared with lengths when the CSS property supports compatible length-percentage values.

For example:

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

The browser compares 600 pixels with 80% of the relevant containing block's width.

If the containing block is 500 pixels wide, 80% equals 400 pixels, so the resulting width is 400 pixels.

If the containing block is 1000 pixels wide, 80% equals 800 pixels, so the resulting width is 600 pixels.

This is useful for containers that should shrink on smaller screens but stop growing after reaching a preferred width.

Percentage values depend on the property being used. For example, percentage widths normally refer to the containing block's width, while other properties can use different reference measurements.

Using Viewport Units

Viewport-relative units allow min() to respond to changes in browser window dimensions.

For example:

.heading {
  font-size: min(32px, 4vw);
}

The font size follows 4% of the viewport width until it reaches 32 pixels.

Another example:

.section {
  padding: min(40px, 5vw);
}

The padding increases with the viewport width but does not exceed 40 pixels.

Modern viewport units such as svw, lvw, and dvw can also be used where supported.

For example:

.panel {
  padding-inline: min(40px, 5dvw);
}

When using min() for font sizes, remember that it does not establish a minimum size. A small viewport can produce text that is too small to read comfortably.

Use clamp() when both minimum and maximum font-size limits are needed.

Comparing Multiple Values

The min() function can compare more than two values.

For example:

width: min(800px, 90vw, 70rem);

The browser evaluates all three values and selects the smallest.

With a root font size of 16 pixels, 70rem equals 1120 pixels.

At a viewport width of 600 pixels, 90vw equals 540 pixels, so the result is 540 pixels.

At a viewport width of 1200 pixels, 90vw equals 1080 pixels, so the result is 800 pixels.

Another example:

margin-top: min(40px, 3rem, 5vh);

The smallest resolved length determines the top margin.

Using several arguments is useful when a value must remain below multiple upper limits.

Nested Calculations

The min() function supports arithmetic expressions and can be combined with other CSS mathematical functions.

For example:

width: min(800px, 100% - 40px);

The browser compares 800 pixels with the available containing block width minus 40 pixels.

The function can also be nested inside calc():

width: calc(min(600px, 80%) + 20px);

This selects the smaller value and adds 20 pixels.

Another example combines min() and max():

width: max(300px, min(800px, 70%));

This keeps the calculated width between 300 and 800 pixels when the preferred percentage value falls outside those limits.

The same calculation can be expressed more clearly with clamp():

width: clamp(300px, 70%, 800px);

The calc() wrapper is not required for arithmetic inside min() because the function already supports mathematical expressions.

Using Custom Properties

CSS custom properties can provide reusable values for min() calculations.

For example:

:root {
  --content-width: 900px;
}
.content {
  width: min(var(--content-width), 90%);
}

The content width cannot exceed the smaller of 900 pixels and 90% of its containing block.

Another example uses a custom property for spacing:

:root {
  --section-spacing: 48px;
}
.section {
  padding-block: min(var(--section-spacing), 5vw);
}

Changing the custom property updates the upper spacing limit throughout the design.

Custom properties are useful when several components share the same responsive sizing rules.

min() vs. max()

The min() and max() functions select opposite results.

For example:

.box-a {
  width: min(600px, 90%);
}
.box-b {
  width: max(300px, 50%);
}

The first box uses whichever width is smaller. The second uses whichever width is larger.

Use min() when an upper limit is needed and max() when a lower limit is needed.

min() vs. clamp()

The clamp() function combines a minimum value, preferred value, and maximum value.

For example:

font-size: clamp(16px, 3vw, 32px);

This keeps the calculated font size between 16 and 32 pixels.

By comparison:

font-size: min(32px, 3vw);

This limits the font size to 32 pixels but does not prevent it from becoming smaller than 16 pixels.

Use clamp() when both lower and upper limits are important, especially for responsive typography.

min() vs. minmax()

The min() and minmax() functions have similar names but serve different purposes.

The min() function compares numeric values:

.box {
  width: min(600px, 90%);
}

The minmax() function defines a minimum and maximum track size in CSS Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(150px, 1fr));
}

Unlike min(), minmax() is not a general-purpose mathematical comparison function.

Example

This example uses min() to select the smaller of two fixed width values.

HTML:

<div class="min-demo">
  <div class="min-demo-box">min(180px, 260px)</div>
</div>

CSS:

.min-demo {
  padding: 20px;
  background-color: #f1f3f5;
}
.min-demo-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(180px, 260px);
  min-height: 65px;
  padding: 10px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 13px;
  box-sizing: border-box;
}

The function selects 180 pixels because it is smaller than 260 pixels.

Both values are fixed lengths, so the result does not depend on viewport or container dimensions.

Responsive Width Example

This example uses min() to create a container that can shrink with its parent but never grows wider than 500 pixels.

HTML:

<div class="min-responsive-demo">
  <div class="min-responsive-box">
    Responsive Width
  </div>
</div>

CSS:

.min-responsive-demo {
  padding: 20px;
  background-color: #f1f3f5;
  border: 1px solid #dddddd;
}
.min-responsive-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(500px, 100%);
  min-height: 80px;
  margin-inline: auto;
  padding: 15px;
  background-color: #0066cc;
  color: #ffffff;
  font-size: 14px;
  box-sizing: border-box;
}

When the available width is less than 500 pixels, the box uses 100% of its containing block's width.

When more than 500 pixels are available, the box remains 500 pixels wide.

Resize the browser window to see the width respond to the available space.

Common Uses

The min() function is useful when a CSS value should not exceed the smallest of several limits.

For example:

.content {
  width: min(100%, 900px);
  margin-inline: auto;
}
.section {
  padding-block: min(48px, 5vw);
}
.image {
  width: min(100%, 600px);
  height: auto;
}

These declarations allow elements to respond to available space while limiting their maximum calculated dimensions.

For simple fixed limits, properties such as max-width or max-height may be easier to read.

Limitations

The min() function has several important rules and limitations.

• At least one argument is required.
• Arguments must be separated by commas.
• Arguments must have compatible numeric types.
• The result must be valid for the property receiving it.
• Percentages depend on the reference measurement defined by the property.
• The function does not automatically establish a lower limit.
• Viewport-based font sizes can become too small on narrow screens.
• Other CSS constraints, including min-width and max-width, can affect the final used dimensions.
• Some percentage calculations depend on layout measurements resolved later in rendering.

For example, this is valid:

width: min(600px, 90%);

The following is invalid because the arguments have incompatible numeric types:

width: min(200px, 30deg);

The following is invalid because no argument is supplied:

width: min();

Remember that min() selects the smallest argument but does not guarantee that the resulting value is large enough for the content.

Use clamp() when both minimum and maximum limits are needed.

Browser Support

The CSS min() function is Baseline Widely available and has been supported across major browser engines since 2020.

Modern versions of Chrome, Edge, Firefox, Safari, and other major browsers support the function.

For example:

.box {
  width: min(600px, 90%);
}

Older browsers may not recognize the function. A fallback declaration can be provided:

.box {
  width: 90%;
  max-width: 600px;
  width: min(600px, 90%);
}

Browsers supporting min() use the calculated width, while unsupported browsers use the fallback width and maximum-width constraint.

For current compatibility information, visit Can I Use? and search for CSS min() max() and clamp().

Specifications

The min() function is defined in the CSS Values and Units Module Level 4 .

The specification defines how comparison functions evaluate compatible numeric values and mathematical expressions.

Related CSS functions include max(), clamp(), and calc(). The similarly named minmax() function is defined separately for CSS Grid track sizing.