Determining available space for flex items

The flex container has to figure out how much space it can make available before the flex items can be sized.

Why? Because the flex items have to know how much room they’re working with. If we have two flex items that want to grow in size, we need to know how much they can grow.

This available space informs how much the flex items will ask for

Before growing or shrinking, flex items get to say what size they’d like to have. Sometimes, the size flex items ask for depends on how much space the flex container is making available.

How much space the flex container can make available depends on how the flex container itself is laid out.

The flex container box looks at its own sizing to figure out how much available space it can offer to its flex items. This depends on the type of layout in which the flex container box itself takes part. It could be laid out in the default Flow layout, and be either a block-level box or an inline-level box. It could be a grid-level box in Grid layout. Or, it could be a flex item box in Flexbox layout.

So this size depends on the layout type of the flex container, not on Flexbox layout directly.

Sometimes, the available space is infinite

The flex container could be a block-level box with the default block-size: auto.

And the ancestor boxes of the flex container are block-size: auto, too.

In that case, the available space for flex items is infinite.

The flex container has no control over flex item sizes in the main direction other than providing a certain amount of available space.

Flex items get a final size with their flex properties, and minimum and maximum sizes.

Even though the available space may be theoretically infinite, some specific size will be needed so the flex items can be sized.

So what’s the point of saying the space is infinite then? The point is that this idefinite infinity is used to get the intrinsic size of the flex container, and this gets us the length of the flex line.