Функция min()CSS3-генератор ☛

Функции: attr()blur()brightness()calc()contrast()drop-shadow()grayscale()hue-rotate()invert()linear-gradient()max()min()clamp()opacity()radial-gradient()repeating-linear-gradient()repeating-radial-gradient()saturate()sepia()var()

Позволяет установить наименьшее (самое отрицательное) значение из списка выражений, разделенных запятыми, в качестве значения свойства CSS . Функцию min() можно использовать везде, где разрешены length, frequency, angle, time, percentage, number или integer.

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

Выражения могут быть математическими выражениями (с использованием арифметических операторов), литеральными значениями или другими выражениями, такими как attr(), которые оцениваются как допустимый тип аргумента (например, length).

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

Математические выражения, включающие проценты ширины и высоты в столбцах таблицы, группах столбцов таблицы, строках таблицы, группах строк таблицы и ячейках таблицы как в таблицах с автоматическим, так и с фиксированным макетом, могут обрабатываться так, как если бы был указан auto.
Допускается вложение max() и других функций min() в качестве значений выражения. Выражения являются полными математическими выражениями, поэтому вы можете использовать непосредственное сложение, вычитание, умножение и деление без использования самой функции calc().
Выражение может представлять собой значения, сочетающие операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Обязательно ставьте пробелы с каждой стороны операндов + и -. Операндами в выражении могут быть любые значения синтаксиса length.
Вы можете (и часто необходимо) комбинировать значения min() и max() или использовать min() в функции clamp() или calc().
Вы можете предоставить более двух аргументов, если вам нужно применить несколько ограничений.
Поддержка браузера: 79 79 75 11.1

Пример

Установка максимального размера для элементов управления адаптивной формы: разрешение ширины меток и входных данных уменьшаться по мере уменьшения ширины формы.

<form>
  <label for="misc">Type something:</label>
  <input type="text" id="misc" name="misc" />
</form>

input,
label {
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  width: min(40%, 400px);
  background-color: pink;
}

form {
  margin: 4px;
  border: 1px solid black;
  padding: 4px;
}