CSS Calc() Not Working

CSS calc() not working

To quote MDN

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. The * and / operators do not require whitespace, but
adding it for consistency is allowed, and recommended.

Space your stuff out, and it will probably work.

Why the CSS calc() function is not working?

You need to add spaces between operators, it's a common mistake to forget them. We can also nest operation using calc as many as we want but they are equivalent to simple parentheses.

From the documentation:

Note: The + and - operators must be surrounded by whitespace. For
instance, calc(50% -8px) will be parsed as a percentage followed by a
negative length—an invalid expression—while calc(50% - 8px) is a
percentage followed by a subtraction operator and a length. Likewise,
calc(8px + -50%) is treated as a length followed by an addition
operator and a negative percentage.

The * and / operators do not require whitespace, but adding it for
consistency is both allowed and recommended.

Note: It is permitted to nest calc() functions, in which case the
inner ones are treated as simple parentheses.

.one {
  background: red;
  width: calc(100% - 150px);
  margin-top: calc(20px + calc(40px * 2)); /*Same as calc(20px + (40px * 2))*/
  height: calc(100px - 10px);
  padding: calc(5% + 10px) calc(5% - 5px);
}

<div class="one">

</div>

Attempt to use calc() in CSS does not work

line-height: calc(1.5 * (100vw - 50px));

try this and reduce the px according to your requirement.

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

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>

CSS3 calc(100%-88px) not working in Chrome

The problem in the question was caused by the lack of space around the subtraction operator.

Note that the grammar requires spaces around binary ‘+’ and ‘-’
operators. The ‘*’ and ‘/’ operators do not require spaces.

https://www.w3.org/TR/css3-values/#calc-syntax

^{This article mentions that the spacing is necessary for unambiguous parsing.}

Bad: calc(100%-88px)

Good: calc(100% - 88px)

---

How do I know it is not recognizing it? Because of the strikethrough
and the yellow triangle icon next to the style rule in chrome dev
tools.

A property that is struck through when viewed in Chrome's developer tools may be valid but overridden; however, a property struck through and with a warning triangle icon next to it is invalid.

---

2022 Update - calc() is supported by all modern browsers in a wide variety of scenarios, though proper spacing is still required.

CSS3 calc() function not working correctly

You need to know that between inline and inline-block elements, the spaces matters. So if you have a whitespace between two inline elements, it takes account in the total calculation. To avoid this there are a lot of tricks, but the simplest is the following:

 .containero {
       font-size: 0;
 }

Add this property in your CSS and it works. Working example:

.containero {

    font-size: 0;

    width: 100%;

    background-color: yellow;

    display: inline-block;

    box-sizing:border-box;

}

.noey, .yeso {

  border: 1px solid red;

  width: 30px;

  height: 30px;

  text-align: center;

  vertical-align: middle; 

  display:inline-block;

  color: red;

  padding:0px;

  box-sizing:border-box;

}

.inpoot {

  height: 31px;

  margin: 0 5px;

  display:inline-block;

  width: calc(100% - 70px);

  box-sizing:border-box;

}

<div class="containero">

  <button class="noey">No</button>

  <input  class="inpoot" />

  <button class="yeso">Yes</button>

</div>

Using CSS Variables with Calc() not working when 2nd parameter

Nested calcs are possible (https://developer.mozilla.org/en-US/docs/Web/CSS/calc#Nested_calc()_with_CSS_Variables) but your calculation is taking a px unit and dividing it by a px unit which is an invalid operation, the second parameter when using calc and dividing must be numerical. The same can be said for when using the multiplication operator, eg you can't use 10px * 10px, but could do 10 * 10px or 10px * 10 . So I would say looking at your use case, you might be better off with two ScSS / Sass variables.

See the example on this pen:
https://codepen.io/ypoulakas/pen/rQXyZr

$h2fontsize: 21;

$paddingTop: $h2fontsize / 3;

$paddingBottom: $h2fontsize / $paddingTop;

body {
--padding-top: #{$paddingTop}px;  
--padding-bottom: #{$paddingBottom}px;
--margin-top: calc( var( --padding-top ) * 4 );
--margin-left: calc( ( var( --margin-top ) ) / 2 ) ;
  background-color: pink;
}

.test {
  padding-top: var(--padding-top);
  padding-bottom: var(--padding-bottom);
  background-color:red;
  margin-top: var(--margin-top);
  margin-left: var(--margin-left);
}

The two Sass variables are used to control the padding top and bottom based on the h2 font size variable. Looking at your formula though the bottom padding will always be 3 .

As an extended part of your example I set the top and let margins based on css variables rather than Sass ones. If you see the left margin is set as calc (200px / 10px) the margin isn't set but if you remove the px on the 10, the left margin will be set properly.

---

Related Topics