Codestin Search App

min() CSS Function

If this site has been useful, we’d love your support! Consider buying us a coffee to keep things going strong!

Description

The min() CSS function allows you to select the smallest value from a list of comma-separated expressions. It is particularly useful for creating responsive designs where you want a property to adapt dynamically but never exceed a certain value. The function can accept any combination of lengths, percentages, numbers, or even other CSS functions such as clamp() and max().

When applied, min() evaluates each value and applies the one that is numerically the smallest. This makes it ideal for situations where you want to constrain a property without using media queries. It works with various CSS properties, such as font-size, width, height, and margin.

Example 1: Responsive font size

p {
  font-size: min(4vw, 18px);
}

In this example, the paragraph text will scale with the viewport width, but it will never exceed 18px.

Example 2: Constraining a container

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

Here, the container will take up 90% of the parent element’s width but will not grow larger than 1200px. This is particularly helpful when combined with div layouts in responsive designs.

Example 3: Combining with other functions

h1 {
  font-size: min(clamp(16px, 5vw, 40px), 36px);
}

This sets the heading size to the smaller of two values: a dynamically clamped range or a fixed maximum of 36px.

The min() function is widely supported in modern browsers and provides a clean, declarative way to manage responsive sizing without relying heavily on media queries.

Syntax

min() = min( value1, value2, ... )

Values

value1, value2, ...A list of comma-separated values - where the lowest value is chosen. Required.

Example

HTML

<body>



    <div class="responsive-box">

        <p>This box uses <code>min(80%, 600px)</code>.</p>

        <p>Resize your browser window to see it in action!</p>

    </div>



</body>

CSS

body {

    font-family: sans-serif;

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    margin: 0;

    background-color: #f0f2f5;

}



.responsive-box {

    /* The logic: Use 80% width, but stop growing once 600px is reached */

    width: min(80%, 600px);

    

    background-color: #ffffff;

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

    text-align: center;

    border: 2px solid #007bff;

}

Result

Editor

Browser Support

The following information will show you the current browser support for the CSS min() function. Hover over a browser icon to see the version that first introduced support for this CSS function.