Calc of max, or max of calc in CSS

Is it possible to do something like this

max-width: calc(max(500px, 100% - 80px))

or

max-width: max(500px, calc(100% - 80px)))

in CSS?

A 'pure' css solution actually is possible now using media queries:

.yourselector {
  max-width: calc(100% - 80px);
}

@media screen and (max-width: 500px) {
  .yourselector {
    max-width: 500px;
  }
}

No you cannot. max() and min() have been dropped from CSS3 Values and Units. They may be re-introduced in CSS4 Values and Units however. There is currently no spec for them, and the calc() spec does not mention that either are valid inside a calc() function.

min(), max(), and clamp() are finally available!

Support starts in Firefox 75, Chrome 79, and Safari 11.1 (clamp is available in Safari 13.1).

min() and max() take any number of arguments.

clamp() has syntax clamp(MIN, VAL, MAX) and is equivalent to max(MIN, min(VAL, MAX)).

min() and max() may be nested. They can be used in calc() as well as outside of it, they also may contain math expressions, that means you can avoid calc() when using them.

Therefore the original example can be written as:

max-width: max(500px, 100% - 80px);

A workaround would be to use width itself.

max-width: 500px;
width: calc(100% - 80px);

While @david-mangold's answer above, was "close" it was incorrect.
(You can use his solution if you want a minimum width, instead of a maximum width).

This solution demonstrates that @gert-sønderby comment to that answer does work:
The answer should have used min-width, not max-width.

This is what it should have said:

min-width: 500px;
width: calc(100% - 80px);

Yes, use min-width plus width to emulate a max() function.

Here's the codepen (easier to see the demo on CodePen, and you can edit it for your own testing).

.parent600, .parent500, .parent400 {
    height: 80px;
    border: 1px solid lightgrey;
}
.parent600 {
    width: 600px;
}
.parent500 {
    width: 500px;
}
.parent400 {
    width: 400px;
}

.parent600 .child, .parent500 .child, .parent400 .child {
    min-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid blue;
    height:60px;
}

.ruler600 {
    width: 600px;
    border: 1px solid green;
    background-color: lightgreen;
    height: 20px;
    margin-bottom: 40px;
}
.width500 {
    height: 20px;
    width: 500px;
    background-color: lightyellow;
    float: left;
}
.width80 {
    height: 20px;
    width: 80px;
    background-color: green;
    float: right;
}

.parent600 .wrong, .parent500 .wrong, .parent400 .wrong {
    max-width: 500px;
    width: calc(100% - 80px);
    border: 1px solid red;
    height:60px;
}

(Min) min-width correctly gives us the Larger dimension:

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

<div class="parent500">
    500px parent
    <div class="child">child is max(500px, 500px - 80px) = max(500px, 420px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent400">
    400px parent (child expands to width of 500px)
    <div class="child">child is max(500px, 400px - 80px) = max(500px, 320px) = 500px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

(Max) max-width incorrectly gives us the Smaller dimension:

<div class="parent500">
    500px parent
    <div class="wrong">child is min(500px, 500px - 80px) = min(500px, 420px) = 420px</div>
</div>

<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<div class="parent600">
    600px parent
    <div class="wrong">child is min(500px, 600px - 80px) = min(500px, 520px) = 500px</div>
</div>

<div class="ruler600"><div class="width500">500px</div>20<div class="width80">80px</div></div>

That said, @andy's answer above may be easier to reason about, and may be more appropriate in many use cases.

Also note, that eventually a max() and a min() function may be introduced to CSS, but as of April 2019 it is not part of the spec.

• Here you can check for max() Browser compatibility:
  https://developer.mozilla.org/en-US/docs/Web/CSS/max#Browser_compatibility.

• Here is the draft of of the proposal:
  https://drafts.csswg.org/css-values-4/#comp-func.
  Scroll to the top of the page to see the last revision date (As of today, it was last revised on 5 April 2019).

Change max to Max, you will see the dirty magic

max-width: Max(500px, calc(100% - 80px)))

@Amaud Is there an alternative in order to have the same result ?

There is a non-js pure css approach that would achieve similar results. You would need to adjust the parent elements container padding/margin.

.parent {
    padding: 0 50px 0 0;
    width: calc(50%-50px);
    background-color: #000;
}

.parent .child {
    max-width:100%;
    height:50px;
    background-color: #999;
}

<div class="parent">
  <div class="child"></div>
</div>

This is only supported in dart-sass https://sass-lang.com/documentation/syntax/special-functions#min-and-max.

You can also make use of string interpolation (similar to CSS variables) for this to work outside of dart-sass

max-width: #{"max(500px, calc(100% - 80px))"}