Want to save max() of time?

You know those little things you can spend tons of time on? Last week, I had one of those moments with a colleague. We spent too much time on it and then just accepted, “Okay, we didn’t know this.” But if I tell you, it might save you some time. We tried to do something like this.

div {
  width: max(120vh - 271px, 0);
}

This doesn’t work at all. Can you spot the error?

div {
  width: max(120vh - 271px, 0px);
}

It turns out that max() can’t calculate a value that has a unit alongside a unitless value. The browser then gets confused about the comparison. The same applies to the math functions calc(), min(), and clamp().

To save time, use units, folks!