Справочник HTML & CSS

min()

Берёт наименьшее из значений — способ задать верхний предел.

Синтаксис

min(value, value, …)

Параметр	Тип	Описание
values	length	Два или больше значений через запятую, единицы могут быть разными.

Колонка не шире 300px и не шире родителя:

<div style="width: min(100%, 300px); margin: 0 auto; padding: 8px; background: lavender;">
  300px wide, but never wider than the screen
</div>

width: min(100%, 300px) делает то же, что width: 100%; max-width: 300px, в одну строку. Может показаться наоборот: min() задаёт максимум.

max() — Берёт наибольшее из значений — способ задать нижний предел.
clamp() — Держит значение в пределах: желаемое, но не меньше минимума и не больше максимума.
max-width — Максимальная ширина: элемент может быть уже, но не шире.

Функции CSS — Вычисления прямо в CSS — calc(), min(), max() и clamp(), смешивание единиц, плавные размеры и функции вместе с переменными.