flex-basis: 0

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-grow and flex-shrink -- so much so that you usually see them in shorthand as:

flex: 1 0 auto;

That means 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 flex-basis property.

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.