HomeGuideLabGlossary

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.

flex-wrap: nowrapA single-lineflex container

Single-line flex container have a single flex line.

Yep it’s just me!

The size of that flex line is the same size as the flex container.

Keep your friends close, but your flex containers closer

So there can be no remaining space.

0px0px!!

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.

Remaining space1500pxflex-wrap: wrap

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.

Remaining space1

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.

What a nice little longer sentence you have here!

How to calculate this

Take the cross size of the flex container.

1crosssize

Subtract the sum of cross sizes of all flex lines.

Remaining space1flex containercrosssizeflex line cross sizeremainingspace