How can you make one flex item take up the remaining space in a container?

Difficulty: 3/10

flex-grow, flex-basis, remaining space allocation

Making a Flex Item Fill Remaining Space

In Flexbox, you can make a single flex item occupy the remaining space in a container by using the flex-grow property or the shorthand flex property.

Key Techniques

1
Set the container's display to flex.
2
Set the flex item you want to expand with flex: 1 (or flex-grow: 1) so it takes up remaining space.
3
Other flex items can have flex: 0 or fixed widths so they do not grow.

Example: One Flex Item Fills Remaining Space

In this example, the middle .item-flex expands to fill all remaining space between the two fixed-width items, demonstrating how flex: 1 allows a flex item to take up available space.

Scenario Questions

0-2 years experience

Follow-up Questions