17

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.

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • Yes, it turned out to be a duplicate after several editing (originally I was assuming that it doesn't work on online code editors like jsfiddle and codepen), but this one has a much better formatted answer to it. – connexo May 23 '15 at 12:44
  • I would not agree that the other should be marked duplicate of this since, really, this question should have been answered by searching. It has been answered many times: http://stackoverflow.com/q/15108285/3150271 | http://stackoverflow.com/q/14967421/3150271 | http://stackoverflow.com/q/25211621/3150271 – Anonymous May 23 '15 at 12:48
  • Ofc I searched first, but my search included "Codepen" and "Snippets", as did my original question title, and it returned no suitable results.. That's how it developed (already explained in previous comment). – connexo May 23 '15 at 12:50
  • Ok, I see your point. Out of curiosity though, what made you think that it was strictly happening in those places? – Anonymous May 23 '15 at 12:57
  • I was trying to help someone else with a different problem here on SO and used it in the snippet, and it didn't work. So I check in Codepen, and then in JSFiddle, with no success. That's all I tried, it was enough for me to ask. – connexo May 23 '15 at 12:58

1 Answers1

60

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

Renfei Song
  • 2,941
  • 2
  • 25
  • 30
  • this is a hack, really you cracked it... `min-width: calc(calc(100% - 34.39px) / 2); max-width: calc(calc(100% - 34.39px) / 2);` – ArifMustafa Oct 18 '18 at 13:31