Check for remaining flex line space in the cross direction
This space will be offered to flex item auto margins
Just like they did in the main axis, flex items get to claim any remaining space in the flex line with auto margins.
Before they do, we need to know how much space there is left.
You calculate this separately for each flex item
Each flex item gets to decide about its size in the cross axis.
You basically want to check if the “outer” size of the flex item, that is the size of its margin box, is smaller than the size of the flex line.
How to calculate the remaining space
Take the size of the flex line in the cross axis.
Subtract the “outer” (margin box) size of the flex item. If the flex item has margin: auto on either side, then treat that as margin: 0.
The result is the remaining space.
Flex item stretch by default, so there won’t be any space left.
In the Sizing phase of Flexbox layout, each flex item gets a chance to stretch itself to fill the flex line in the cross axis.
This happens if it has align-self: stretch, or align-self: auto and the flex container has : normal or : stretch.