[Solved] calc not always working in IE

[Mave]

Hi, I’m creating a website for a friend and I’m having a bit of trouble with IE.

First let me explain my situation:

I have two divs next to eachother. (both 50% width)
– One is an image that scales when the browser window gets resized.
– The other one is a div that also proportionally scales, just like the image. Inside this div there are comments and a ‘post your comment’ field. The comments need to be 100% (then overflow-auto for a scrollbar) MINUS the height of the ‘post your comment’.
So logically I created this:

.activityCommentListComponent{
overflow:auto;
max-height: calc(100% – 60px);
}

However IE is doing this sometimes, not always, to my annoyance.
If I refresh the page, half of the posts will have the scrollbar and desired height, the other half won’t.

Any ideas/suggestions?

[Beverleyh]

Any particular version of IE acting up or is it all of them?

How about a reduced case example? That might help you see if other CSS in your page is creating the problem or if it specifically is calc. If you do that in CodePen and post it here, it would be really helpful for us to help you troubleshoot, otherwise we’re just guessing.

If your tests indicate that other CSS is impacting on calc, a link to your actual page would be great too.

[Paulie_D]

You can see the support for calc here CanIUse – Calc

It’s worth checking out the ‘Known Issues’ and making sure that the spacing inside the ‘equation’ is correct.

[Mave]

Here’s my Codepen: http://codepen.io/anon/pen/myKZJE?editors=110

EDIT: I can’t seem to re-produce the IE bug…
Maybe anyone knows a solution for me to not use calc() here?
I’m sure the IE bug will also disappear then.

I tried using box sizing border box as an alternative, but I can’t make it work.. : http://codepen.io/anon/pen/XJYLRw

[Paulie_D]

I’m guessing (although you say this is a ‘sometimes’ problem) that IE is having trouble with calc of 100% when it may not know what 100% means.

Usually, the 100% will refer back to a specific value…all the way up the DOM and if that’s not 100% on the html & body elements it’ll break.

[Mave]

Thanks for your answer.
Is there something else I could use instead of calc() with the same result? (responsive div next to responsive image)

[Shikkediel]

I noticed similar behaviour in IE where it would only respond to a line-height set in vh after a page reload. I think in this case JavaScript’s the only option left to solve it?

[Mave]

I fixed it!
Changing

max-height: calc(100% – 60px);

to

height: calc(100% – 60px);

was all it took…
At least it’s solved now.
Thanks to everyone who replied.

[Shikkediel]

Interesting – and a bit odd, thanks for the update. No JS needed then.

[Author]

Posts