CSS Math Functions: calc(), min(), max() and clamp()

CSS can do maths for you. Math functions let you mix units and set limits, so sizes adapt to the screen by themselves.

The Four Main Functions

Function	What it does	Example
`calc()`	Works out a sum	`calc(100% - 40px)`
`min()`	Uses the smallest value	`min(90%, 800px)`
`max()`	Uses the largest value	`max(50%, 300px)`
`clamp()`	Keeps a value between a minimum and a maximum	`clamp(1rem, 2.5vw, 2rem)`

All of them work anywhere a number with a unit is allowed: widths, padding, font sizes, gaps and more.

calc()

calc() can add +, subtract -, multiply * and divide /. Its superpower is mixing different units, which you cannot do by hand.

Example

html

<!DOCTYPE html>
<html>
<head>
<style>
body { margin: 0; font-family: Arial, sans-serif; }
.layout { display: flex; }
.sidebar {
  width: 200px;
  background-color: #1e293b;
  color: white;
  padding: 16px;
  box-sizing: border-box;
}
.main {
  width: calc(100% - 200px);
  background-color: #eef2ff;
  padding: 16px;
  box-sizing: border-box;
}
</style>
</head>
<body>

<div class="layout">
  <div class="sidebar">Menu (always 200px)</div>
  <div class="main">Content (all the rest of the width)</div>
</div>

</body>
</html>

Try it Yourself »

Always put spaces around + and - inside calc(). calc(100% - 20px) works, but calc(100%-20px) is an error and is ignored.

min()

min() picks the smaller value. It is perfect for a box that should be wide on big screens but never wider than the phone.

Example

css

.container {
  width: min(90%, 1100px);
  margin-inline: auto;
}

On a phone, 90% is smaller, so the box is 90% wide. On a laptop, 1100px is smaller, so the box stops at 1100px. This one line replaces width plus max-width.

max()

max() picks the larger value. Use it to set a minimum size.

Example

css

.sidebar {
  width: max(25%, 220px);
}

The sidebar is a quarter of the page, but never narrower than 220px.

It feels backwards at first: min() sets a maximum limit, and max() sets a minimum limit. Read min(a, b) as "whichever is smaller".

clamp()

clamp(MIN, PREFERRED, MAX) is like min() and max() together. The preferred value usually uses vw so it grows with the screen.

Example

html

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body { font-family: Arial, sans-serif; }
h1 {
  font-size: clamp(1.5rem, 1rem + 4vw, 4rem);
  color: #264de4;
}
.box {
  width: clamp(200px, 60%, 600px);
  padding: clamp(12px, 3vw, 40px);
  background-color: #fef3c7;
}
</style>
</head>
<body>

<h1>Workownix Summer Camp</h1>
<div class="box">Resize the window. The heading, the width and the padding all grow and shrink smoothly, but stay inside their limits.</div>

</body>
</html>

Try it Yourself »

This is called fluid typography: text that scales smoothly with no media queries at all.

Mixing rem into the preferred value (like 1rem + 4vw) is a good habit. A size made only of vw does not grow when the user zooms the page.

Nesting Functions

Math functions can go inside each other, and they work with CSS variables:

Example

css

:root {
  --gap: 1rem;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  gap: calc(var(--gap) * 2);
}

min(100%, 250px) stops a 250px column from overflowing on very small screens.

A Few More

Modern browsers also support more maths:

round() rounds a value, for example round(17px, 5px) gives 15px
abs(), sign(), mod() and rem() for advanced layouts
sin(), cos() and tan() for placing items in a circle

You will rarely need them, but it is good to know they exist.

Exercise

What width does width: min(90%, 800px) give on a screen that is 1200px wide (the parent is full width)?

1080px800px90%1200px