flex-grow

Definition

The flex-grow CSS property is used in flexbox layouts to specify how much an individual flex item should grow in relation to other flex items within a flex container. It determines the proportion of available space that each flex item should take up along the main axis. The flex-grow property accepts a unitless value, typically a positive number.

For example, flex-grow: 2; would make an item grow twice as much as other items with a flex-grow value of 1. The higher the flex-grow value, the more space the item will occupy relative to others. This property is useful for creating flexible and responsive layouts where items expand or shrink based on available space.

Syntax

.sidebar {
  flex-grow: 2;
}

Values

<number>: proportion of free space to distribute (default 0).

Practical Examples

.sidebar {
  flex-grow: 2;
}

.content {
  flex-grow: 1;
}

Higher grow factors give items a larger share of available space.

HTML

grow 2

grow 1

Code

<div class="flex gap-4 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
  <div class="flex grow-[2] items-center justify-center rounded-lg bg-slate-100 p-4 text-sm text-slate-700">grow 2</div>
  <div class="flex grow items-center justify-center rounded-lg bg-slate-100 p-4 text-sm text-slate-700">grow 1</div>
</div>

Tips & Best Practices

Keep factors small integers for clarity.
Set flex-basis or width for baseline sizing before growth.

Accessibility & UX Notes

Ensure expanded items don’t push critical UI below the fold unexpectedly.

Browser Support

Supported widely.

flex-shrink to control shrinking.
flex shorthand.