Each line will stretch to fill the remaining space.

In this case, the container is 300px high. All boxes are 50px high, apart from the second one who is 100px high.

• The first line is 100px high
• The second line is 50px high
• The remaing space is 150px

This remaining space is distributed equally amongst the two lines:

• The first line is now 175px high
• The second line is now 125px high

Each line will only fill the space it needs. They will all move towards the start of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. They will all move towards the end of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. They will all move towards the center of the flexbox/grid container's cross axis.

Each line will only fill the space it needs. The remaining space will appear between the lines.

Each line will only fill the space it needs. The remaining space will be distributed equally around the lines: before the first line, between the two, and after the last one.