How does `flex-grow:0` get interpreted?

Question

I wonder if flex-grow:0 in the Flexbox model means

• width:0 or
• \"grow=0\" .

If it means the latter, is it save to

Answer 1

flex-grow:0 simply means that the item won't be resized during item size calculation to accommodate flex container's full main axis size.

Specification describes it as:

This <number> component sets flex-grow longhand and specifies the flex grow factor, which determines how much the flex item will grow relative to the rest of the flex items in the flex container when positive free space is distributed. When omitted, it is set to 1.

I've emphasized main axis size above beacuse you should know that flex-grow is related to main axis of the flex container which can be width or height dimension depending on flex-direction and writing directionality of user browser.

Therefore we can't assume being equal to your assumption.

But when we're talking about flex-direction: row and writing directionality LRTB (left to right, top to bottom) then they do work in the similar fashion as width: auto;. Items do appear as inlined, but they still don't render the same because no whitespace is being added for each line break in HTML source as we normally see with usual inline elements.

How about width: 0?

Flex item width is associated with flex-basis property rather than grow factor. Although flex properties have precedence over width or height of items when grow and shrink factors are defined and non-zero.