Expand a flex item to fill unused space

The Solution at a Glance

• Set a flex-grow greater than 0 on the flex item to make it grow in the main direction.
• Make sure the flex container is not sized based on the size of its flex items. There won’t be any unused space to grow into in that case.

Make flex items grow with a flex-grow greater than 0

By default, flex items don’t grow to fill any potential unused space inside the flex container’s content box. They ask to be a certain size based on their content. And if they get to be that size, they’re satisfied.

Flex items don’t grow by default because the initial value of flex-grow is 0. 0 means “no thank you, I don’t want to grow at all if given the chance”.

To make a flex item grow, set its flex-grow to any number greater than zero.

Different flex-grow values make flex items grow at different rates relative to each other

If you have multiple flex items that want to grow, you can have some of them of them grow more relative to others by giving them a higher value of flex-grow compared to the others.

For example, a flex item with flex-grow: 2 will grow by twice as many pixels as a flex item with flex-grow: 1.

Make sure the flex container has unused space for flex items to grow into

Keep in mind there has to be unused space inside the flex container’s content box for the flex items to grow into.

If a flex container’s size depends on the size of the flex items, there won’t be any unused space.

You’ll need to make sure the flex container is sized the way you want by following the rules of the type of layout used for the flex container. Just as the flex container lays out its child boxes using Flexbox, so the parent of the flex container can choose a different type of layout for the flex container.