min()

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

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

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

Функция принимает одно или несколько значений разделённых запятой, так же поддерживается вложенность других функций, например calc():

        
          
          .selector {  width: min(50%, calc(1000px / 2), 700px);}
          .selector {
  width: min(50%, calc(1000px / 2), 700px);
}

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

Использовать функцию можно в любых 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), что буквально означает: элемент занимает половину ширины вьюпорта, но не больше 350 px.

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