6

IE11 does not seem to calculate calc(50% - 1rem), but all other browsers do.

How can I fix it?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Blaja
  • 131
  • 3
  • 8

1 Answers1

10

According to this answer, there is apparently a bug with flexbox and how IE11 handles it. Namely, you cannot use calc() with the flex shorthand in IE11 as you are trying to do.

I don't have IE11 on this machine, so I can't test any solution for you, nor am I really experienced with flexboxes, but try writing out the property you want to use (e.g. grow, shrink, basis) in long form.

EDIT: After some further research, a potential reason for this is that IE11 is trying to do something stupid like combine values to allow for decimals. Have you tried something like calc((50%) - (1rem))?

Community
  • 1
  • 1
TylerH
  • 20,799
  • 66
  • 75
  • 101
  • 4
    this answer is correct. Do not use the shorthand flex declaration with calc(). flex-basis should be explicitly used. https://github.com/philipwalton/flexbugs#8-flex-basis-doesnt-support-calc – Olivvv May 21 '15 at 11:18