Why does an element with { flex: 1; width: 0; } still have width?

Question

Facebook uses this CSS:

{flex: 1;  width: 0;}

but the div still has width.

Answer 1

You're asking about two different properties and functions.

flex: 1 is equivalent to flex: 1 1 0, both of which are shorthand equivalents of:

• flex-grow: 1
• flex-shrink: 1
• flex-basis: 0

When you add width: 0, it's actually redundant and unnecessary in a row-direction container, like the one in the question.

flex-basis: 0 = width: 0 in this case.

If this flex-basis / width rule were by itself, then you would have your expected behavior: The element would have 0 width.

However, these properties only set the initial main size of a flex item, before free space is distributed by other flex properties.

With flex-grow: 1, the item will consume all available space on the line after having factored in flex-basis / width.

More information:

• What are the differences between flex-basis and width?
• 7.1. The flex Shorthand
• 7.1.1. Basic Values of flex