The flex-grow property sets the growth factor for a flex item.
This setting is relevant when space is left inside a container.
flex-grow sets the growth relative to other items.
Item 3 has flex-grow set to 5.
It grows up to 5 times or until the container is filled.
<style>
.flex-grow {
background-color: #776fac;
padding: 5px;
display: flex;
}
.flex-grow > div {
background-color: aliceblue;
margin: 5px;
width: 20%;
text-align: center;
line-height: 55px;
font-size: 20px;
}
</style>
<div class="flex-grow">
<div>1</div>
<div>2</div>
<div style="flex-grow: 5">3</div>
</div>
flex-grow: number | initial | inherit;
| Value | Description |
|---|---|
number |
A floating point number representing a growth factor. Default value is 0 (no grow). |
initial |
Sets the value to its default value. |
inherit |
Inherits the value from its parent element. |
This table shows when flex-grow support started for each browser.
 Chrome
|
29.0 | Aug 2013 |
 Firefox
|
28.0 | Mar 2014 |
 IE/Edge
|
11.0 | Oct 2013 |
 Opera
|
17.0 | Aug 2013 |
 Safari
|
9.0 | Sep 2015 |
