The flex-grow property specifies how much the item will grow relative to the rest of the flexible itemsinside the same container.

<div class="flex_container">
    <div>Box 1</div>
    <div class="box_2">Box 2</div>
    <div>Box 3</div>
</div>

.flex_container .box_2 {
    flex-grow: 3;
}

Default value	0
Inherited values	no
Can it be animated?	yes

These are the allowed values.

Value	Description
number	A number specifying how much the item will grow relative to the rest of the flexible items (default value is 0)
initial	Sets this property to its default value
inherit	Inherits this property from its parent element

The HTML element can also be styled using JavaScript and the element’s id.

document.getElementById('my_div').style.flexGrow = '3';

<button onclick='my_function()'>Click Here</button>

<script>
function my_function() {
    document.getElementById('my_div').style.flexGrow = '3';
}
</script>

---