CSS flex-grow Property

CSS flex-grow Property

The flex-grow property in CSS controls how much a flex item expands to fill available space in a flex container. It works only when display: flex; is applied to the parent.

1. Syntax

selector {
  flex-grow: number;
}

Value	Description
0 (default)	The item does not grow, even if there’s extra space.
1	The item grows to fill the space equally with others.
2+	The item grows twice (or more) compared to others.

2. Basic Example

✅ Equal Growth (flex-grow: 1;)

.container {
  display: flex;
  width: 400px;
  border: 2px solid black;
}

.item {
  flex-grow: 1;
  padding: 20px;
  background: lightblue;
}

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
</div>

✅ All items grow equally and divide the space evenly.

✅ Unequal Growth (flex-grow: 2;)

.item:nth-child(2) {
  flex-grow: 2;
  background: lightcoral;
}

✅ Item 2 grows twice as fast as Item 1 and Item 3.

✅ Prevent Growth (flex-grow: 0;)

.item {
  flex-grow: 0;
}

✅ The item does not grow, even if space is available.

3. Combining flex-grow with flex-shrink and flex-basis

Instead of setting flex-grow alone, it's often better to use the shorthand:

.item {
  flex: 1 0 200px;  /* flex-grow: 1; flex-shrink: 0; flex-basis: 200px; */
}

✅ This means:

• Grows if space is available (1)
• Does not shrink (0)
• Starts with a base width of 200px

4. Best Practices

✔ Use flex-grow: 1; for equal space distribution.
✔ Use higher values when some elements should grow more than others.
✔ Combine with flex-shrink and flex-basis for better layout control.