Why is CSS calc(100%-250px) not working? [duplicate]

Question

I've tested it in the most recent versions of Firefox, Chrome, IE 11. In none of those browsers it works when you use the CSS calc() function to calculate e.g. width. As far as I can see I have applied it properly. For reference you might want to check

http://www.sitepoint.com/css3-calc-function/

Why is this not working?

div {
  background-color: blue;
  height: 50px;
  width: calc(100%-250px);
}

<div></div>

Demos:

http://codepen.io/anon/pen/wazZWm

http://jsfiddle.net/h5mzcow1/

Edit:

Yes, this question developed to become a duplicate in the course of many edits, but I still think this should remain here, because it illustrates the problem better than for example CSS calc() not working . Also, imho the answer is much better.

Answer 1

It's because you have to put a space between the + or - operator in order for it to work properly.

div {
  background-color: blue;
  height: 50px;
  width: calc(100% - 250px);
}

<div></div>

From the MDN docs:

Note: The + and - operators must always be surrounded by whitespace. The operand of calc(50% -8px) for instance will be parsed as a percentage followed by a negative length, an invalid expression, while the operand of calc(50% - 8px) is a percentage followed by a minus sign and a length. Even further, calc(8px + -50%) is treated as a length followed by a plus sign and a negative percentage. The * and / operators do not require whitespace, but adding it for consistency is allowed, and recommended.

Source: MDN

W3C Documentation