max()

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

        
          
          .container {  width: max(50%, 500px);}
          .container {
  width: max(50%, 500px);
}

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

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

        
          
          .text {  font-size: max(2rem, min(1vw, 1em));}
          .text {
  font-size: max(2rem, min(1vw, 1em));
}

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

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

        
          
          .container {  width: max(50% - 40px, 400px);}
          .container {
  width: max(50% - 40px, 400px);
}

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

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

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

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

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

В примере использованы значения max(4.5vw, 18px). Это означает, что размер текста составляет 4.5% от ширины вьюпорта, но не менее 18px. Чем больше ширина экрана, тем больше текст.

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

💡 При помощи max() можно ограничить значение снизу.