midCSS
How do CSS clamp(), min(), and max() work?
Updated Apr 28, 2026
Short answer
These mathematical functions allow fluid responsive sizing. min() sets a maximum bound, max() sets a minimum bound, and clamp() does both.
Deep explanation
clamp(minimum, preferred, maximum) dynamically adjusts a value within a range. min() returns the smallest value among the arguments (acts as a max boundary), and max() returns the largest (acts as a min boundary).
Real-world example
Fluid typography that scales up with the viewport but never goes below 1.5rem on mobile or above 3rem on ultra-wide screens.
Common mistakes
- Mixing up min() and max() logic. Using min(50%, 500px) means the element will be 50% width until 50% exceeds 500px, so 500px is the maximum.
Follow-up questions
- Can clamp() be used for padding?