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

CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Two Column Layout with Flexbox

Posted by Ahmed AL-dabagh
Ahmed AL-dabagh
3,036 Points

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
231,269 Points
Steven Parker
Steven Parker
231,269 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.

mersadajan
mersadajan
21,306 Points

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,522 Points
Yvette Pascacsio
Yvette Pascacsio
5,522 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
231,269 Points
Steven Parker
Steven Parker
231,269 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".