CSS flex-grow Property

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.

Example

#

Item 3 has flex-grow set to 5.
It grows up to 5 times or until the container is filled.

1
2
3
<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>

Syntax

flex-grow: number | initial | inherit;

Values

#

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.

Browser support

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

You may also like

Guides