calc()
calc() performs math directly in a CSS value, and can mix different units — something you cannot do with plain arithmetic in CSS otherwise.
calc() Example
<style>
.sidebar-layout {
display: flex;
}
.sidebar {
width: 150px;
background: #764ba2;
}
.main {
width: calc(100% - 150px);
background: #eef4fb;
}
.sidebar-layout > div {
padding: 16px;
color: #333;
}
</style>
<div class="sidebar-layout">
<div class="sidebar" style="color: white;">Sidebar</div>
<div class="main">Main content fills exactly the remaining width</div>
</div>min() and max()
min() picks the smallest of a list of values, and max() picks the largest — both evaluated at render time, so they respond to viewport or container size changes.
min() and max() Example
<style>
.box {
/* Never wider than 90% of its container, but never more than 300px */
width: min(300px, 90%);
background: steelblue;
color: white;
padding: 16px;
}
</style>
<div class="box">Responsive width with min()</div>clamp()
clamp(min, preferred, max) picks a value that stays between a minimum and maximum, but prefers a middle value that can scale — extremely useful for fluid font sizes that scale with the viewport without ever getting too small or too large.
Fluid Font Size with clamp()
<style>
.heading {
/* never smaller than 20px, never larger than 40px, scales with viewport width between */
font-size: clamp(20px, 5vw, 40px);
}
</style>
<h2 class="heading">Resize the preview to see this scale</h2>Function Summary
| Function | Purpose |
|---|---|
| calc() | Perform math, mixing units like % and px |
| min() | Use the smallest of a list of values |
| max() | Use the largest of a list of values |
| clamp(min, preferred, max) | Stay within a range while scaling fluidly |
clamp() is min() and max() Combined
clamp(MIN, VAL, MAX) is roughly equivalent to max(MIN, min(VAL, MAX)) — it’s essentially a convenient shorthand for combining both bounds in one declaration.
Best Practice
Use clamp() for fluid typography and spacing instead of writing many separate media queries — it often replaces several breakpoints with a single, smoothly scaling declaration.