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

Question

I tested it in the latest versions of Firefox, Chrome, IE 11. In none of these browsers does it work when you use the calc() CSS function to calculate, for example. width . As far as I can see, I applied it correctly. For reference you can 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> 

Demonstrations:

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

http://jsfiddle.net/h5mzcow1/

Edit:

Yes, this question began to duplicate during many changes, but I still think it should stay here because it illustrates the problem better than, for example, CSS calc () does not work . Also, imho answer is much better.

Answer 1

This is because you must put a space between the + or - operator for it to work correctly.

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

 <div></div> 

From MDN docs:

Note. The + and - operators should always be surrounded by spaces. For example, the calc(50% -8px) operand calc(50% -8px) will be parsed as a percentage followed by a negative length, an invalid expression, while the calc(50% - 8px) operand calc(50% - 8px) is a percentage followed by a minus sign and length. Moreover, calc(8px + -50%) considered as followed by a plus sign and a negative percentage. * and / operators do not need a space, but adding it for consistency is allowed and recommended.

Source: MDN

W3C Documentation