curriculum/challenges/english/blocks/css-flexbox/587d78ae367417b2b2512afc.md
The opposite of flex-shrink is the flex-grow property. Recall that flex-shrink controls the size of the items when the container shrinks. The flex-grow property controls the size of items when the parent container expands.
Using a similar example from the last challenge, if one item has a flex-grow value of 1 and the other has a flex-grow value of 3, the one with the value of 3 will grow three times as much as the other.
Add the CSS property flex-grow to both #box-1 and #box-2. Give #box-1 a value of 1 and #box-2 a value of 2.
The #box-1 element should have the flex-grow property set to a value of 1.
const boxOne = document.querySelector('#box-1');
const flexGrow = window.getComputedStyle(boxOne)['flex-grow'];
assert.equal(flexGrow, '1');
The #box-2 element should have the flex-grow property set to a value of 2.
const boxTwo = document.querySelector('#box-2');
const flexGrow = window.getComputedStyle(boxTwo)['flex-grow'];
assert.equal(flexGrow, '2');
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
}
#box-2 {
background-color: orangered;
height: 200px;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>
<style>
#box-container {
display: flex;
height: 500px;
}
#box-1 {
background-color: dodgerblue;
height: 200px;
flex-grow: 1;
}
#box-2 {
background-color: orangered;
height: 200px;
flex-grow: 2;
}
</style>
<div id="box-container">
<div id="box-1"></div>
<div id="box-2"></div>
</div>