How to Use flex-grow in CSS: Simple Guide with Examples

The flex-grow property in CSS controls how much a flex item will grow relative to others inside a flex container. Setting flex-grow to a positive number lets the item expand to fill extra space proportionally.

Syntax

The flex-grow property accepts a single number value that defines the growth factor of a flex item. A value of 0 means the item will not grow beyond its initial size. A positive number (like 1, 2, etc.) means the item can grow to fill available space relative to other items.

css

flex-grow: <number>;

/* Example values */
flex-grow: 0; /* no growth */
flex-grow: 1; /* grow equally */
flex-grow: 2; /* grow twice as much as flex-grow: 1 */

Example

This example shows three boxes inside a flex container. The first box has flex-grow: 1, the second flex-grow: 2, and the third flex-grow: 1. The second box grows twice as much as the others to fill the container's extra space.

css

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: flex;
  width: 100%;
  height: 100px;
  background-color: #eee;
}
.box {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  margin: 5px;
  text-align: center;
  font-size: 1.2rem;
}
.box1 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 2;
  background-color: #2196F3;
}
.box3 {
  flex-grow: 1;
  background-color: #f44336;
}

Output

<div class="container">
  <div class="box box1">Box 1 (flex-grow: 1)</div>
  <div class="box box2">Box 2 (flex-grow: 2)</div>
  <div class="box box3">Box 3 (flex-grow: 1)</div>
</div>

Common Pitfalls

One common mistake is forgetting to set display: flex on the container, so flex-grow has no effect. Another is setting flex-grow but also fixing the width of flex items, which prevents them from growing. Also, flex-grow only works if there is extra space available in the container.

css

/* Wrong: flex-grow ignored because container is not flex */
.container {
  width: 300px;
  border: 1px solid black;
}
.box {
  flex-grow: 1;
  background-color: lightblue;
  padding: 10px;
}

/* Right: container is flex, so flex-grow works */
.container {
  display: flex;
  width: 300px;
  border: 1px solid black;
}
.box {
  flex-grow: 1;
  background-color: lightblue;
  padding: 10px;
}

Quick Reference

• flex-grow: 0; — item does not grow.
• flex-grow: 1; — item grows equally with others set to 1.
• flex-grow: 2; — item grows twice as much as those with 1.
• Works only inside a flex container (display: flex).
• Only affects growth when extra space is available.

Key Takeaways

Set display: flex on the container for flex-grow to work.

flex-grow controls how much a flex item expands relative to others.

A value of 0 means no growth; higher numbers mean more growth.

Flex items only grow if there is extra space in the container.

Avoid fixing widths on flex items if you want them to grow.