min()

The min() function returns the minimum value from the given values.

        
          
          .selector {  width: min(50%, 500px);}
          .selector {
  width: min(50%, 500px);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

The function takes one or more arguments. All arguments are separated by commas.

Arguments can be:

• absolute, for example, 500px;
• relative, for example, 50% or 20vw, or 1rem;
• a combination of absolute and relative;
• mathematical expressions, for example, 20rem * 2;
• other functions: max(), clamp(), min().

Example of nesting other functions and a mathematical expression:

        
          
          .selector {  width: min(20rem * 2, max(100px, 30%));}
          .selector {
  width: min(20rem * 2, max(100px, 30%));
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

You can use min() in any CSS properties where the value is a number, for example:

        
          
          .selector {  background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);}
          .selector {
  background: linear-gradient(135deg, #2c3e50, #2c3e50 min(20vw, 60%), #3498db);
}

        
        
          
            
            Copy
            Copied
            Failed to copy
          
        
      

When rendering, the browser determines the minimum value and substitutes it into the styles.

In the example above, min(50vw, 350px) means: the element occupies 50% of the width of the viewport, but no more than 350 px.

💡 It's convenient to use the min() function to limit the width of a component depending on the width of its parent.