Check for remaining multi-line flex container space in the cross direction
This doesn’t apply to single-line flex containers
A flex container is single-line if it has : nowrap
.
Single-line flex container have a single flex line.
The size of that flex line is the same size as the flex container.
So there can be no remaining space.
You’ll only get remaining space in this step if the flex container has a definite size.
What’s a definite size?
For example, a fixed size like 500px
.
Or, the flex container is a grid item in Grid layout. Then, its size is considered definite, too, and is the size of the grid area it’s laid out into.
Why does the size have to be definite? Because if it’s not, it relies on the size of the flex items. So then the size of the flex container will be the same as the size of the flex lines, and there won’t be any remaining space.
How to calculate this
Take the cross size of the flex container.
Subtract the sum of cross sizes of all flex lines.