0

I tried the following style on a div but it is saying invalid css:

max-width: calc(24rem-13px);

The calc is using rem and px combined. If I remove the px part, then browser accepts the calc as valid style.

I am using latest Chrome.

vijayst
  • 20,359
  • 18
  • 69
  • 113
  • 4
    spacing is important in ```calc()``` css function, ```calc(24rem - 13px);``` – Nexo Jul 21 '22 at 18:23
  • This is a known issue from w3 css validator: https://stackoverflow.com/questions/18035088/parse-errors-when-using-calc-with-rem-and-px – Sandushi Dileka Jul 21 '22 at 18:28
  • 1
    Ultimately, this question is a duplicate of [Why doesn't the CSS calc() function work for me?](https://stackoverflow.com/questions/15108285/why-doesnt-the-css-calc-function-work-for-me) in that the cause is the missing whitespace surrounding the operator inside of `calc()`. – Alexander Nied Jul 21 '22 at 18:29

1 Answers1

5

You just need to add a space around the minus operator:

.test {
  background-color: gold;
  max-width: calc(24rem - 13px);
}
<div class="test">I have a max width</div>

It's not working because without the space it could be interpreted as a negative value calc(24rem - -13px) for example

David
  • 311
  • 1
  • 2
  • 12