Getting percentages to work in CSS calc() for Firefox and Safari?

Question

I\'m using the following calc() equation to calculate the width of two divs:

CSS

.MyClass {
    width: calc((100% - 800px) / 2);
    wid         


        

Answer 1

The reason for this not working is that the parent element does not have height value defined.

It is strange but it works for Chrome and it does not need defined height, but that is not the case for Firefox

If you have:

<div class="parent">
    <div class="child"></div>
</div>

put:

.parent {
    height: 100%;
}

and it should be ok.

Answer 2

Eureka. I've been struggeling with this for days. Finally found that 100vh instead off 100% would make it work with most browsers.

height: calc(100vh - 100px);

instead of

height: calc(100% - 100px);

Finally, now I can get on with my project.

Answer 3

Works for me..: CSSDeck example --> in Firefox Nightly

Are you using a CSS-preprocessor, which could interfere with calc()? Have you tried to replicate the issue in a controlled environment (plain html + css without any scripts etc)?

EDIT: Also note that calc(100%-3em) might not work, while calc(100% - 3em) should.