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 CSS Flexbox Layout Building a Layout with Flexbox Creating a Two Column Layout with Flexbox

a problem with flex grow

a giving the .row {flex-grow: 1;} at break point min-width:769px but the primary steel bigger then the secondary I can fix this with flex-basis property but I want to know why it doesn't apply it should work right they have to take equal space in the container

2 Answers

Steven Parker
Steven Parker
220,415 Points

I think you have the container and item properties confused.

You say you add a flex-grow property to your .row rule, but if you're working along with the video, the "row" class is assigned to the flex container. Yet the flex-grow is a property that would be used by a flex item, not a container.

For a more complete analysis, share your code (be sure to format it properly). Even better, make a snapshot of your workspace and post the link to it here.

I have the same problem but i set .col to flex-grow: 1; which should be the correct class. I have to use width 50% to get an even split and later width: auto for higher resolutions

Yvette Pascacsio
Yvette Pascacsio
5,345 Points

Try "flex", not "flex-grow". I can try to explain why it works this way, but when I tried, I confused myself. Just do it, it works, after a while you understand why.

Steven Parker
Steven Parker
220,415 Points

"Flex" is a shorthand for flex-grow, flex-shrink and flex-basis combined. If you set only one property with it, it provides values for the other two for you. The values it provides aren't necessarily the default values you'd get if you set the same property with "flex-grow" instead, and that can be a bit confusing.

For more details, see this MDN page on "flex".