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 trialAhmed AL-dabagh
3,036 Pointsa 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
231,236 PointsI 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.
Yvette Pascacsio
5,522 PointsTry "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
231,236 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".
mersadajan
21,306 Pointsmersadajan
21,306 PointsI 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