Calc of max, or max of calc in CSS

Question

Is it possible to do something like this

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

or

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


        

Answer 1

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;
}

<h2>(Min) min-width correctly gives us the Larger dimension: </h2>
<div class="parent600">
    600px parent
    <div class="child">child is max(500px, 600px - 80px) = max(500px, 520px) = 520px</div>
</div>

<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>


<h2>(Max) max-width <em>incorrectly</em> gives us the Smaller dimension: </h2>
<div class="parent400">
    400px parent
    <div class="wrong">child is min(500px, 400px - 80px) = min(500px, 320px) = 320px</div>
</div>
<div class="ruler600"><div class="width500">500px</div><div class="width80">80px</div></div>

<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).

Answer 2

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.