postcss-flexbugs-fixes
postcss-flexbugs-fixes copied to clipboard
flex: 1 1 0 != flex: 1 1
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?
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.