Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

flex: 1 1 0 != flex: 1 1 #59

Open
loginovma opened this issue Jan 29, 2019 · 1 comment
Open

flex: 1 1 0 != flex: 1 1 #59

loginovma opened this issue Jan 29, 2019 · 1 comment

Comments

@loginovma
Copy link

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?

@luisrudge
Copy link
Owner

I think this pr (#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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants