Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Adam Akers
7,357 PointsConfused about flex-grow and growth rate
In the Flexbox course, and many other tutorials online, they go over flew-grow. I've watched a good number of tutorials, but I'm still a little lost with how flex-grow works. I understand that if set to 1, it will expand to take up the rest of the space within that container. What gets me though is if you have two children in a flex container and one of those children has a flex-grow: 1; and the other has flex-grow: 2;. People keep saying that the second item is going to be twice as big or grow at twice the rate of the first. When I measure the two items, the one with the flex-grow: 2; is not twice as big as the first. What is this growth rate they are referring to?
1 Answer
Kevin Korte
28,148 PointsThe growth rate is the remaining available space.
Take this codepen example. http://codepen.io/kevink/pen/ZOAaGg
In a flexbox of 1000 px, I have an image, native at 604px x 404x. I have an H2 as a title of "The Leaf". It's 62.19px x 404px.
This means I have 333.81px remaining space to be distributed. Since I only have two flex children, the image will try to take up one third of the remaining space, and the h2 will try to take up two thirds of the remaining space. Two thirds of 333.81 px is about 222.54px, plus the original 62.19px = 284.73px in width, before the image gets any extra width.
One third of the 333.81 is about 111.27px, so our 604px picture grows by 111.27px to 715.27px.
Thus, the h2 title took twice as much remaining available space as the image did. Hopefully that made sense. Play with the numbers on the codepen to illustrate different scenarios. See if you can calculate the sizes of flex children using different grow attributes, and than modify the code to see if they grew to the size you calculated, using the inspector to verify.
Adam Akers
7,357 PointsAdam Akers
7,357 PointsThanks for the explanation! It makes a lot more sense now
Kevin Korte
28,148 PointsKevin Korte
28,148 PointsExcellent, I'm glad because I had the same question as you awhile ago. It's a good question!