IE11 does not seem to calculate calc(50% - 1rem)
, but all other browsers do.
How can I fix it?
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))
?