postcss-flexbugs-fixes icon indicating copy to clipboard operation
postcss-flexbugs-fixes copied to clipboard

flex: 1 1 0 != flex: 1 1

Open loginovma opened this issue 6 years ago • 1 comments

There is a little issue with truncating the flex-basis value in the shorthand notation. In Chrome and Firefox flex: 1 1 0 computes into flex-basis: 0px, whether flex: 1 1 to flex-basis: 0%. It is not that much of trouble until you try to modify the content of the element dynamically which will lead to the difference for that two values.

The difference is that the percentage values rely on the size of the parent being set, and they fall back to their content otherwise. That doesn't happen with the pixels. https://www.w3.org/TR/css-flexbox-1/#flex-basis-property

Probably it is better to go for the full flex notation in the resulted code (use all three flex-grow, flex-shrink and flex-basis properties). That can eliminate the ambiguity in the flex-basis value. Does that approach has its hidden pitfalls?

loginovma avatar Jan 29 '19 11:01 loginovma

I think this pr (https://github.com/luisrudge/postcss-flexbugs-fixes/pull/56) tried to do this. Can you check it out?

The only pitfall I can see with this is if, for any reason, you try to add something like this:

flex: 1 1;
flex-basis: 10px;

I know it's unusual, but it's possible and it would break everything if we tried to mess with it.

luisrudge avatar Jan 29 '19 13:01 luisrudge