The value of flex can mean different things

[silvenon]

I didn't know this before, but apparently you can set flex to 30px and it will only set flex-basis, you can also set it to 1 30px, which sets flex-grow and flex-basis while skipping flex-shrink.

It looks like we have more work to do 😔

[luisrudge]

What do you mean? We don't have to change anything when the css is using one of this values, right?

[silvenon]

flex: 30px means flex: 0 0 30px in IE10 instead of flex: 0 1 30px, so we do have to expand it 😕

Check out the updated Flexbug 6.

[mgol]

You shouldn't change flex: 30px to flex: 0 0 30px, that would be a bug. flex: 30px is equivalent to flex-basis: 30px, the rest should stay untouched as I understand it...

[mgol]

Hmm, but for the same reason expanding flex: 1 to flex: 1 1 0% is probably wrong. Maybe the plugin should just generate a rule setting proper defaults:

* {
    flex: 0 1 0%;
}

and then change flex: 1 to flex-grow: 1 and flex: 30px to flex-basis: 30px?

[silvenon]

Does flex: 30px really just do flex-basis: 30px? My CSS-fu is a bit rusty, but I think CSS shorthands set everything else to default:

flex-shrink: 5;
flex: 30px;

I'm pretty sure that now flex-shrink has been reset to 1 (or 0 in IE's case). So turning flex: 30px into flex-basis: 30px would be incorrect.

[mgol]

Ah, you're right. I got confused because Chrome Dev Tools seem to show it all incorrectly:
This is the styles pane (I expanded the flex: 40px rule, Chrome should show to what it expands):

And this is what I get in the console for this element:

[silvenon]

Nice catch, you could perhaps raise an issue in DevTools.