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 div
s. 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: