min()

Функция min() возвращает минимальное значение из указанных.

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Функция принимает одно или несколько аргументов. Все аргументы разделяются запятыми.

Аргументы могут быть:

• абсолютными, например, 500px;
• относительными, например, 50% или 20vw, или 1rem;
• комбинацией абсолютных и относительных;
• математическими выражениями, например, 20rem * 2;
• другими функциями: max(), clamp(), min().

Пример вложения других функций и математического выражения:

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Использовать min() можно в любых CSS-свойствах, значение которых является числом, например:

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

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

При отрисовке браузер определяет минимальное значение и подставляет его в стили.

В примере выше указано min(50vw, 350px), что означает: элемент занимает 50% ширины вьюпорта, но не больше 350 px.

💡 Удобно с помощью функции min() ограничивать ширину компонента в зависимости от ширины родителя.