How hard would it be to make this work with IE Flexbox?

[corysimmons]

Right now IE doesn't support calc() inside of any of their Flexbox rules. (e.g. flex: 0 0 calc(100% - 30px) won't work)

Is this something that you could possibly fix?

[rodebert]

Right now this polyfill checks if the used browsers supports calc(). As IE 10 and higher support calc() this script does not polyfill anything in these browsers.

What you can do is to fork is repo and adjust the checking process. Identify IE 10 and higher disregard the check of support for calc() and only fix the calc() if used within flex.

[corysimmons]

I don't think I'm smart enough to do that, but thanks for taking the time to answer. I really appreciate all the work you put into this polyfill.

[mestaritonttu]

The bug in IE 10 & 11 only affects shorthand rules, though: https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc

[corysimmons]

This is untrue. The bug also affects long hand rules as far as I can tell.

<section>
  <figure>1</figure>
  <figure>2</figure>
</section>

* {
  background: rgba(0,0,255,0.1);
}
section {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
figure {
  -webkit-flex-basis: calc(100% / 2);
      -ms-flex-preferred-size: calc(100% / 2);
          flex-basis: calc(100% / 2);
}

Renders 2 figures at half the size of the viewport in every browser but IE.

[corysimmons]

Reopening in hopes someone of higher JS skill than me can contribute. @closingtag feel free to close if you'd like.

[abass]

It would be absolutely killer if we could get some proper calc() support going with IE. That would allow for proper flexbox grid systems to exist in-place of floating grid systems. While I definitely do not have the JS knowledge to do this, I completely agree with this and would really appreciate someone stepping up taking this problem head-on.

[rodebert]

Guys!

This will continue here: https://github.com/closingtag/ie-flexbox-calc

I will try to update the repo as soon as possible. Stay tuned.

[corysimmons]

You're seriously the best polyfill maintainer I've ever met.

[chrisobs13]

@corysimmons @mestaritonttu

The longform flexbox syntax does with with this polyfill:

So Instead of this:

flex: 0 0 calc(100%/2)

Write this:

flex-grow: 0;
flex-shrink: 0;
flex-basis: calc(100%/2);

Then you can use a separate library for adding vendor prefixes.

[corysimmons]

I forget what this bug was about and have stopped paying attention to IE8 completely, but I think there are flexbugs involved with the shorthand forms which might be why I was interested in longhand support.