CSS flex-grow Property

What You’ll Learn

The flex-grow property controls how much a flex item expands when the flex container has extra space. It is a key tool for building responsive layouts that adapt to different screen sizes.

Introduction

The flex-grow property in CSS is used in flexbox layouts to define the ability of a flex item to grow relative to the rest of the flex items inside the same container. This property is a crucial part of creating responsive and dynamic layouts, as it allows flex items to expand and fill available space.

Definition and Usage

Apply flex-grow on flex items inside a container with display: flex. Use higher values when an item should take more leftover space — for example, a main content area with flex-grow: 1 and a fixed sidebar with flex-grow: 0.

📝 Syntax

The syntax for the flex-grow property is simple and involves specifying a positive number, which represents the proportion of available space the item should take up relative to other flex items.

element {
  flex-grow: number;
}

Here, number is a unitless value that determines how much of the available space inside the flex container the item should take up.

Basic Example

.main {
  flex-grow: 1; /* fills leftover space */
}

Default Value

The default value of the flex-grow property is 0, which means the flex item will not grow and will only take up the space it needs based on its content.

Syntax Rules

• Apply on flex items, not on the flex container.
• Accepts non-negative numbers (0, 1, 2, etc.).
• Values are proportional ratios, not percentages or pixel sizes.
• The property is not inherited.
• Works along the main axis only (row or column depending on flex-direction).

💎 Property Values

How grow factors divide space

If three items have grow values of 1, 2, and 0, and the container has 300px of leftover space, items 1 and 2 share that space in a 1:2 ratio (100px and 200px). Item 3 gets none because its grow factor is 0.

Examples Gallery

In this example, we’ll create a flex container with three items. The second item will be set to grow twice as much as the first item, while the third item will not grow — plus equal growth, sidebar layouts, and search bars.

<style>
  .container { display: flex; }
  .item1 { flex-grow: 1; background: red; }
  .item2 { flex-grow: 2; background: green; }
  .item3 { flex-grow: 0; background: blue; }
</style>

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

.column {
  flex-grow: 1;
}

.main { flex-grow: 1; }
.sidebar { flex-grow: 0; width: 180px; }

.search-input { flex-grow: 1; }
.search-btn { flex-grow: 0; }

♿ Accessibility

• Do not rely on flex-grow alone for reading order — keep logical DOM order for screen readers.
• Ensure grown content remains readable at very wide or narrow sizes.
• Test keyboard focus when items resize on different viewports.
• Use semantic elements like main and aside in sidebar layouts.
• Pair with min-width on inputs so text fields do not become too narrow on small screens.

💡 Best Practices