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.


Why is the line keep breaking around 100px even though the flex-basis has been set to 0?

I've tried setting the flex-basis value to multiple values under 100px, but when I resize the browser, the line keeps breaking when the items reach 100px in width. Any reason why this may be the case?

2 Answers


Is there a chance the items have a child that is set to around 100px or the child has padding etc. This seems quite a quirky thing to be happening can you set up a workspace or pen on codepen to have a look at the code on and see it in action ?


Hi Matt,

One of the reasons it is breaking is that the items content is to large in comparison to the flex-basis declaration. If you edit your flex-basis to 200px you will see the items wrap before the content goes onto another line within the item.

Is there something in particular you would like this code to do that I can help with or are you having a bash around with flexbox and just getting to know the quirks ? :)


Craig --

If you see at the end of Guil's tutorial (Smarter Layouts with flex-basis and flex @ 6:20), he sets the flex-basis to 0 by setting flex: 1;. I noticed when I mimicked the code in the workspace, the break was appearing to happen much sooner (around 100px) in my browser than it was in his.

At the end of the day it's just curiosity! :)