ie11 not currently working with single flex value

[dajomu]

Hi,

If I have some css with a value like flex: 1 we are currently outputting flex: 1 1. This isn't picked up by ie11, as it needs three values for flex in order to render properly (it basically doesn't treat this flex value at all, so messes up the styles).

Would it be possible (perhaps even preferable) to output flex as a combo of flex-grow, flex-shrink and flex-basis?

So we would have -

flex: 1;

=>

flex-grow: 1;

---

flex: 1 1;

=>

flex-grow: 1;
flex-shrink: 1;

etc...

This would solve the safari 0% issue and would also make this compatible with ie11. I'm up for putting in a pull request for this, but wanted to check whether you think it's worthwhile before I get started... Let me know what you think.

[lh0x00]

@luisrudge I have the same problem, if I use flex: 1 1 IE11 will break but I can fix it to flex: 1 1 auto or add flex-basis: auto.

[luisrudge]

@lamhieu-vk the fix makes a lot of sense (expanding flex to flex-{shrink|grow}). Do you want to take a shot at it?