Flex Grow & Shrink

One of the coolest things about flexbox is how items can grow and shrink to fill available space. Two properties control this behavior: flex-grow and flex-shrink. Together they determine how flex items share or give up space.

Flex Grow

flex-grow controls how much an item should expand to fill extra space. The default value is 0, meaning items will not grow at all. If you set it to 1, the item will take its fair share of available space.

.container {
  display: flex;
}

.item-a {
  flex-grow: 1;
}

.item-b {
  flex-grow: 2;
}
    

In this example, item-b grows twice as much as item-a. If there is 300px of extra space, item-a gets 100px and item-b gets 200px. Think of it like splitting a pizza — the person with the bigger appetite (higher grow value) gets more slices.

Flex Shrink

flex-shrink is the opposite. It controls how much an item shrinks when there is not enough space. The default is 1, meaning items will shrink equally. Set it to 0 to prevent an item from shrinking at all.

.item-a {
  flex-shrink: 1;
}

.item-b {
  flex-shrink: 0;
}
    

With this setup, item-b will never shrink below its original size. item-a will absorb all the compression. This is useful when you have an element that must stay a certain width, like a logo or a fixed sidebar.

The Shorthand: flex

Instead of writing flex-grow and flex-shrink separately, you can use the flex shorthand. The order is: grow, shrink, basis.

.item {
  flex: 1 1 auto;
}

.item-fixed {
  flex: 0 0 200px;
}
    

The first example grows and shrinks freely. The second stays at exactly 200px — it will neither grow nor shrink. This shorthand comes up all the time in real-world flexbox code.