Flexbug6 - The default flex value has changed
luisrudge opened this issue · comments
This can't be fixed with this tool because there's not enough metadata to take action.
What do you mean "there's not enough metadata"? Wouldn't just setting the flex-shrink for every element (plus ::before & ::after) to 1 work?
Bug:
.FlexContainer {
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
width: 300px;
}Workaround:
.FlexContainer {
display: flex;
height: 100px;
width: 500px;
}
.FlexItem {
flex-shrink: 1; /* 1 */
width: 300px;
}Since we can't possibly know which css classes are child of flex containers, we can't fix ths issue. Does that make sense?
That's why I suggested to put it on all elements. Bootstrap does this with box-sizing: border-box. In scaffolding.less it has:
* {
.box-sizing(border-box);
}
*:before,
*:after {
box-sizing(border-box);
}
(the .box-sizing mixin is essentially a pass-through to set box-sizing, and does the same thing as autoprefixer)
Would doing something similar with flex-shrink cause any problems?
* {
flex-shrink: 1;
}
*:before,
*:after {
flex-shrink: 1;
}Is this what you're suggesting?
Yes. Would that cause any problems?
By the way, how did you get syntax highlighting? I wrote my comment on mobile, was that why they didn't get highlighted?
div {
color: red;
}
I'm not sure that would case problems... But adding a global selector is always risky and might have performance issues. I'll ping some people that helped me in the past to see if they can add something to this discussion.
ping @silvenon @demiazz @boyarskiy @kadmil (sorry to ping you all)
OK, I'll stay tuned to what they say. I'm thinking about adding this to my company's site even if this module does not include it, just so I can stop adding flex-shrink: 1 everywhere, but if there are potential problems, I will think twice. Thanks.
I agree that flex-shrink should be set to 1 with a universal selector, like box-sizing, it's the only way to be sure (I haven't tried this yet, though). I don't take CSS selector performance seriously, though, so I don't know if you should listen to me.
Like @luisrudge, there's nothing this plugin can do about this, you can do this yourself if you want to.
One slight correction to the normalizer style I proposed, whether or not it eventually gets added into this module:
Instead of
* {
flex-shrink: 1;
}
*::before, *::after {
flex-shrink: 1;
}
use
* {
flex-shrink: 1;
}
Reason: IE10 is the only major browser this bug applies to. As Bug #12 states, IE10-11 do not allow ::before/::after to be flex items. Therefore, the second part of the normalizer rule,
*::before, *::after {
flex-shrink: 1;
}
does not need to be included, as flex-shrink only applies to flex items.
Yeah, maybe this plugin could add this rule once at the beginning.
Hi. after this discussion, I decided I'll not add a global rule to everyone that uses this plugin. I'll add an entry to the Readme with the fix. Thanks all!
done in a9ec5ce
Thanks! 😊