Почему CSS calc(100%-250px) не работает?

Question

Я тестировал его в самых последних версиях Firefox, Chrome, IE 11. Ни в одном из этих браузеров он не работает при использовании CSS calc() функция для расчета, например, width, Насколько я вижу, я применил это правильно. Для справки вы можете проверить

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

Почему это не работает?

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

<div></div>

Демонстрации:

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

http://jsfiddle.net/h5mzcow1/

Редактировать:

Да, этот вопрос разрабатывался, чтобы стать дубликатом в ходе многих изменений, но я все еще думаю, что он должен остаться здесь, потому что он иллюстрирует проблему лучше, чем, например, не работает CSS calc(). Также imho ответ гораздо лучше.

Answer 1

Это потому, что вы должны поставить пробел между + или же - оператор для того, чтобы он работал правильно.

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

<div></div>

Из документов MDN:

Обратите внимание + а также - операторы всегда должны быть окружены пробелами. Операнд calc(50% -8px) например, будет проанализирован как процент, за которым следует отрицательная длина, недопустимое выражение, в то время как операнд calc(50% - 8px) это процент, за которым следует знак минус и длина. Еще больше, calc(8px + -50%) рассматривается как длина, за которой следуют знак плюс и отрицательный процент. * а также / операторы не требуют пробелов, но добавление их для согласованности разрешено и рекомендуется.

Источник: MDN

W3C Документация