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 Flexbox Properties Smarter Layouts with flex-basis and flex

xin song
xin song
1,929 Points
Posted by xin song
xin song
1,929 Points

Flex-basis: 0 still break the line when narrowing the browser.

.container { display: flex; flex-wrap: wrap; }

.item { flex-grow: 1; flex-basis: 0%;

/* flex: 1;*/ }

I tried to use shorthand or non-shorthand get the same results using Opera Chrome Safari on pc and mac. In chrome dev tool the computed value show me that "flex-basis" is already set to 0%. On caniuse.com flex-basis is fully supported, i don't think browser version to be the problem. The only way i found here is use over-flow: hidden. Is there other way to get the same result as the video?

1 Answer

Mathias OVIEVE
Mathias OVIEVE
11,278 Points
Mathias OVIEVE
Mathias OVIEVE
11,278 Points

Did you resize the window with the dev tool ? Had the same issue with the dev tool not showing proper result in Chrome.

If you resize the browser window manually everything will works as expected.