Seems like IE ignores calc in more instances than shorthand

[corysimmons]

https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc

See my comment here: closingtag/calc-polyfill#9 (comment)

[gregwhitworth]

Hey Cory, can you be more specific in regards to which IE version you're testing as I'm not seeing this behavior in IE11.

[gregwhitworth]

Oh, and here's the JSBin with your testcase: http://jsbin.com/keziveguna/1/edit?output

[corysimmons]

Same JSBin doesn't work in IE10. I don't have IE11 (pretty big VM), but yeah, flex-basis doesn't seem to work in IE10. :(

[mestaritonttu]

Screenshot from Browserstack IE10.

IE11 works ok, checked locally in Win 7.

[corysimmons]

If anyone of decent JS skill is interested in working on the calc polyfill for this, I'd really appreciate it: closingtag/calc-polyfill#9

Without IE10 support for calc in Flexbox, I can't build one of my grids in it... =[

[abass]

+1

If anyone can get achieve this then it'd be absolutely killer for the advancement of flexbox grid systems!

[philipwalton]

Weird. I don't know how I missed this not working in IE10, but it looks like you're right.

An easy workaround, though, assuming you know whether you're in a row or column flex container, is to use flex-basis: auto and then set your calc property on the width, for example:

flex: 0 0 auto;
width: calc(100%/3);

This works for me in IE10.

[corysimmons]

But if you're using width what's the point of using Flexbox?

[abass]

I definitely agree with you @corysimmons though I guess, isn't the main point of flexbox that it eliminates the need for floats/clearfixes? It does seem really stupid that the only fix for IE10 is to set a width though. Sounds really counter-productive.

[corysimmons]

I'm not convinced getting rid of clearfixes/floats is a good enough reason to drop browser support for IE8-9.

I'd like to add that I would love for the polyfill to be fixed to take this into consideration. I'd make a pretty neat Flexbox grid system if that were the case.

[abass]

Very true, which maybe that just means flexbox truly isn't ready yet then? Once IE8 and IE9 finally vanish (IE8 is getting there, even though in theory it's already on EOL, but some XP users are still using it of course). Then maybe that's when flexbox finally makes some sense and it's worth getting rid of floats at that point?

[philipwalton]

But if you're using width what's the point of using Flexbox?

Tons of reasons: equal height flex items, vertical centering, proper baseline alignment, the flex properties (they still work even with a definite flex-basis), and many more.

[corysimmons]

@philipwalton Fair enough. I'll tinker around with this tonight and see if it solves any of my problems.

[corysimmons]

@philipwalton Seems to work pretty well. https://github.com/corysimmons/lost

[philipwalton]

Closed via 1e0e0f5.