Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Adam Akers
Adam Akers
7,357 Points

Confused 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
Kevin Korte
28,109 Points

The 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
Adam Akers
7,357 Points

Thanks for the explanation! It makes a lot more sense now

Kevin Korte
Kevin Korte
28,109 Points

Excellent, I'm glad because I had the same question as you awhile ago. It's a good question!