Raghavendra Prasad Raghavendra Prasad - 2 months ago 19
CSS Question

Calc() function inside another calc() in CSS

How do I use a CSS calc function inside another CSS calc function? according to this post ("https://developer.mozilla.org/en-US/docs/Web/CSS/calc") it is possible but there is no example of that.

Answer

It is possible to use calc() inside another calc().

An example:

div{
  width: calc(100% - (1% + 30px));/* calc(1% + 30px) is nested inside calc()*/
}
div p{
  width: calc(100% - 30px);/*100% is total width of the div*/
}
Comments