Skip to main content

​
Overview

.flex-grow lets an item absorb leftover space in the flex container. Apply it to the item that should expand while its siblings stay at their natural or fixed widths.

​
Single Grow Item

When only one item has .flex-grow, it absorbs all remaining space. This pattern works well for sidebar-plus-content layouts.

​
Multiple Grow Items

When two or more items share .flex-grow, they split the leftover space equally. This creates even-width columns without explicit width classes.

​
Best Practices

  • Add .flex-grow only to the item that should absorb the leftover space.
  • Pair it with fixed-width siblings when you want a stable rail + fluid content pattern.
  • Combine with .flex-shrink decisions when dense layouts need controlled compression.

Flex Basis

Set starting main-axis size before grow runs

Flex Shrink

Control how items contract in tight spaces