min() and max(): bounds in one line

Pick the smallest or largest of multiple values

.container { width: min(90%, 1200px); }      /* whichever's smaller */
.card { padding: max(16px, 2vw); }            /* at least 16px, more on wide screens */

min(a, b, c) returns the smallest computed value. max(a, b, c) returns the largest.

When each beats clamp()

min() handles "AT MOST X, otherwise relative":

.container { width: min(90%, 1200px); }

Same as width: 1200px; max-width: 90% but more readable as ONE rule.

max() handles "AT LEAST X, otherwise relative":

button { padding: max(8px, 1vw); }

Button padding never goes below 8px (mobile), but grows on bigger screens.

clamp(min, ideal, max) is sugar for max(min, min(ideal, max)) — three-valued. Use clamp when you have both bounds; use min/max when you have only one.

Math inside

.gap { gap: max(0.5rem, 1vw + 4px); }

Can mix units freely. Browser computes at use site.