Get hypothetical cross size of flex items

We have the main size, now we need the cross size

As you saw in the previous chapter, figuring out the size of a flex item in the main axis lies at the heart of Flexbox layout. The flex items have complete control over how they agree to be sized.

Sizing flex items in the cross axis is a little different. For one, the Flexbox-related properties like flex-grow or flex-basis have no direct effect on the cross size of flex items. Instead, we’ll get the size of our flex item by looking at its sizing property that corresponds to the cross axis. For example, if you have a row flex container and you’re writing in English, then the main axis is horizontal and the cross axis is vertical. So the property that determines the cross size of the flex items would be height.

This size is called hypothetical because it might change later

That’s because flex lines and flex items can be stretched after we get this size, so it can still change. That’s why we call it hypothetical.

For example:

You have a single-line flex container with three flex items.
The flex items contain only text.
The first two flex items have just a couple of words each, but the third flex item has several sentences inside.
You calculate the main size of these flex items. Let’s say they all end up with the same main size.
Now you calculate the hypothetical cross size. The third flex item has lots of text, so it will need more space in the cross axis. The third flex item has a much bigger hypothetical cross size than the first two.
Let’s say the flex container has height: auto, which means it will figure out its height based on its content. The height needs to be big enough to fit the tallest content, which happens to be the third flex item.
So now we have a single-line flex container where the flex line is the same height as the third flex item.

Now, we’ll look at the align-self property of each flex item. If its value is stretch, then the flex item will stretch itself to fill the flex line.

We just changed the size of the flex item, and the old size no longer applies.
That’s why the “old size” is called hypothetical. It’s because it can change later.

Determining the cross size

Take the main size of the flex item, and the cross-axis space made available by the flex container.

Lay out the contents of the flex item in a rectangle created by the two sizes mentioned above.

Note the cross size you end up with as the hypothetical cross size of the flex item.