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() ограничивать ширину компонента в зависимости от ширины родителя.