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

Seokhyun Wie
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points
Posted by Seokhyun Wie
.a{fill-rule:evenodd;}techdegree seal-36
Seokhyun Wie
Full Stack JavaScript Techdegree Graduate 21,606 Points

Flex-basis doesn't work properly on Google Chrome

Hi, folks. This is Brandon. As I read from several articles, I understand that the flex-basis function is not supported well yet on every browser. However, I would like to ask you if any of you has the same problem as I have. So, according to Guil,

.item { flex: 1; }

this should set the flex basis to zero automatically. Therefore, there shouldn't be a second line in the container; however, on my Google Chrome browser, <ITEM4> moves down to the second line when the total width of the flex container is less than around 473px.

Thank you so much for sharing your experience and have a nice day. :)

Jamie Reardon
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer
Jamie Reardon
.a{fill-rule:evenodd;}techdegree seal-36
Jamie Reardon
Treehouse Project Reviewer

Would be great to see your css code to evidence this. Most of (if not all) of the teaching is tested in Google chrome.

2 Answers

Ling Lei
Ling Lei
6,099 Points
Ling Lei
Ling Lei
6,099 Points

Check if you haven't got your flex-flow set to "nowrap" in your flex-container, otherwise if the content of the flex items are too large to be evenly distributed on one line and there for are wrapping to a new line.

stephen khalaf
stephen khalaf
6,738 Points
stephen khalaf
stephen khalaf
6,738 Points

when I set the flex-wrap to nowrap, the flex-items overlap the flex-container, is there any remedy to this!