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
Leah Miller
16,291 PointsFlexbox container items wider than container.
I have set up a staggered grid of 12 images with flexbox. I finally got it formatted the way I wanted but now noticed that the container is smaller than the times (width wise) the wrapper above it is also a max pf 1150px wide. Shouldn't the items shrink to fit the container? I am not sure what I am doing wrong.
2 Answers
Jamie Reardon
Treehouse Project ReviewerYou are welcome! If this helped you, you can mark my answer as best answer :)
Jamie Reardon
Treehouse Project ReviewerFirst of all, your flex-container has the css property: flex. This is a property that is only to be used for the flex-items. It will therefore have no effect.
You have a 10px margin on your flex-items, and with that, you also have a width of 33.33% on each of them. That width alone adds up to a total of 99.99% your 10px margin is way too much for it to compensate to the 100% width of the flex-container. You need to either subtract your width of your flex-items to compensate for the 10px margin or remove your margin all together and use the justify-content: space-between property. (This is why flex box is so much better, you dont have to do the calculations yourself).
Leah Miller
16,291 PointsThank you so much Jamie! I just removed the margin and problem solved.