What is the Flex-Grow CSS Property (5 Code Examples!)

The flex-grow property is one of many properties available as part of the CSS flexbox layout. flex-grow is applied to children of an element with display: flex. The flex-grow property allows the children to be laid out proportionally, for example:

The flex-grow property will not always behave as expected. It respects minimum width values in the children with smaller flex grow values.

Flex-Grow 1:3:1 Ratio Example

In this example I have a div wrapping three children divs. The p elements exist simply to center the text.

The containing div has a relative width of 50% (in the flexWrapper class). The result is that the flex-grow: 3 div only is 3X the size of its siblings if it has enough room to expand. Otherwise, it only gets whatever space is available after its siblings have been assigned their minimum width.

Notice that this code uses JSS syntax instead of CSS. If you use flexGrow in a class, change it to flex-grow.

<div className="flexWrapper">
  <div style={{ backgroundColor: 'green', flexGrow: 1 }} className="flexed">
    <p className="pStyle">Flex-Grow 1</p>
  </div>
  <div style={{ backgroundColor: 'red', flexGrow: 3 }} className="flexed">
    <p className="pStyle">Flex-Grow 3</p>
  </div>
  <div style={{ backgroundColor: 'blue', flexGrow: 1 }} className="flexed">
    <p className="pStyle">Flex-Grow 1</p>
  </div>
</div>

What Does Flex-Grow 0 Do?

I set the center div to flex-grow: 0 and removed flex grow from the siblings. The center div did not stretch in width regardless of the screen width.

Here are the divs:

<div style={{ backgroundColor: 'green' }} />
<div style={{ backgroundColor: 'red', flexGrow: 0 }} />
<div style={{ backgroundColor: 'blue' }} />

Next I tested what happens when the center div had flex-grow: 1 and the siblings had flex-grow: 0. In this case, the center div expanded to fill up all extra space. There was no ratio or limit to its width, other than the screen width:

<div style={{ backgroundColor: 'green', flexGrow: 0 }} />
<div style={{ backgroundColor: 'red', flexGrow: 1 }} />
<div style={{ backgroundColor: 'blue', flexGrow: 0 }} />

My conclusion is that flex-grow: 0 is the same as having no flex grow value at all.

What Does Flex-Grow 1 Do?

As seen above, if a div has flex-grow: 1 and its siblings have no flex grow value or if they have flex-grow: 0, the div with flex grow of 1 will expand endlessly.

However, we need to know what happens when all divs have flex-grow: 1.

All of the divs expanded equally as I expanded the screen size. They all shrank equally when the screen contracted. Here’s the code:

<div style={{ backgroundColor: 'green', flexGrow: 1 }} />
<div style={{ backgroundColor: 'red', flexGrow: 1 }} />
<div style={{ backgroundColor: 'blue', flexGrow: 1 }} />

How to Flex-Grow Vertically

If you want a vertical flex grow, you need to do two things:

• Set flex-direction: column on the wrapping div
• Give the wrapping div a relative height (i.e. height: 50%)

Here’s example code:

<div className="flexWrapper" style={{flexDirection: 'column', height: '80%'}}>
  <div style={{ backgroundColor: 'green', flexGrow: 1 }} className="flexed">
    <p className="pStyle">Flex-Grow 1</p>
  </div>
  <div style={{ backgroundColor: 'red', flexGrow: 3 }} className="flexed">
    <p className="pStyle">Flex-Grow 3</p>
  </div>
  <div style={{ backgroundColor: 'blue', flexGrow: 1 }} className="flexed">
    <p className="pStyle">Flex-Grow 1</p>
  </div>
</div>

Here’s the vertically flexed div:

This works the same as typical flex grow on width when flex direction is row by default.

The vertical flex-grow was impacted by the font-size value I added to the p elements (in the pStyle class). It significantly increased the minimum height assigned by flex-grow beyond the extra height that my font size required. The default margin value on the p element also impacted beyond what was needed.

What to Do When Flex Grow is Not Working

I will list some basic and advanced steps to take when flex-grow is not working as expected:

Check these basic CSS properties first:

• Make sure the parent div has display: flex
• Make sure the children divs have a flex-grow value
• Make sure the flex-grow value is a numeric value

Here are a few more challenging issues to diagnose:

• Make sure the parent flex element has a relative width (i.e. width: 100%)
• Make sure that the child’s flex-grow value is greater than zero
• If the ratios don’t seem correct
  • check the total screen size
  • check for issues impacting minimum width such as margin and padding

Resources

Here are additional useful posts:

• Material-UI’s Grid Component vs Flexbox, Bootstrap, and CSS Grid
• How to Use Material-UI’s Flexbox System

CSS Tricks flex-grow