Description
The clamp() CSS function clamps a middle value within a range of values between a defined minimum bound and a maximum bound.
The function takes three parameters: a minimum value, a preferred value, and a maximum allowed value.
Syntax
/* Static values */
width: clamp(200px, 40%, 400px);
width: clamp(20rem, 30vw, 70rem);
width: clamp(10vw, 20em, 100vw);
/* Calculated values */
width: clamp(min(10vw, 20rem), 300px, max(90vw, 55rem));
width: clamp(100px, calc(30% / 2rem + 10px), 900px);