Use max()/min() inside of CSS calc()

Question

Is it possible to use max() or min() inside of a calc() statement in normal css?

i.e:

.myclass{
  height: calc(100vh-max(40px, 7vmin));
}

Doesn't seem to work.

Answer 1

Yes, yes you can.

https://developer.mozilla.org/en-US/docs/Web/CSS/max()

You can (and often need to) combine min() and max() values, or use max() within a clamp() or calc() function.

If your current expression isn't working, I think it's because you need inner whitespace so the CSS tokenizer can separate the different components, as it's possible 100vh-max is being interpreted as a single token instead of as 100vh - max(...).

Try this:

.myclass{
  height: calc( 100vh - max( 40px, 7vmin ) );
}

(and I'm sure you'll agree it's easier to read with inner whitespace too).