Truong Minh Nguyen12,573 Points
flex-basis specifies the initial main size of a
flex item. So when
flex-basis is set to 0, are the flex items' widths 0 pixels? Or their width is their content's width?
Eric Butler32,672 Points
Flex-basis overrules any specified CSS
width value, so if you set
flex-basis to 0, it doesn't fall back to the CSS "width" value. However, the only way it'll actually be 0px wide is if there's absolutely no content or padding inside it (which would be uncommon in real-world use). Otherwise, it'll expand to accommodate whatever content/padding is in it, just due to basic, old-school box-model stuff.
The other factor that can totally overrule this is if you're also setting
flex-grow. Flex-basis is VERY commonly used with
flex-shrink -- so much so that you usually see them in shorthand as:
flex: 1 0 auto;
flex-grow: 1; flex-shrink: 0; flex-basis: auto;
If you had 2 flex items and gave them both a
flex-grow property above 0, and set the
flex-basis of one item to 0 and the other to
auto, then both elements will widen evenly and will each fill half of however much room there is to fill. In that case, the
flex-grow property overrules the
It's kinda crazy, but I hope that makes sense. Maybe the best takeaway is, there's probably never a reason to set flex-basis to 0, unless it really shouldn't ever have any width. And if that's the case, you might be better off simply hiding or removing the element altogether.