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
Ivan Saveliev
9,153 PointsWhy No flex-basis or "0" flex-basis still break the line when narrowing the browser?
Hi Everyone,
I'm a bit confused on what's going on with the content in the container while narrowing in this lesson.
- flex-wrap: wrap - already says that content in this container will take multiple lines
So no matter what's the value of flex-basis it must take multiple lines. Due to "wrap" value in "flex-wrap" property, correct?
So the question is, how Guil managed to keep the content in a single line? I had absolutely same CSS but have a different result. I've checked it in Mozilla Firefox (latest) and Microsoft Edge, result is the same.
I would really appreciate if someone can point on what I've misunderstood in the lesson.
Regards, Ivan Savelyev
7 Answers
Maria Campbell
8,641 PointsIvan Savelyev This should answer your question in more detail: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored Apparently there are a slew of flexbox bugs, and the one you encountered and I discussed previously, is one of them.
Maria Campbell
8,641 PointsIt's a browser compatibility issue. flex-basis: 0 will work as Guil said it would (meaning that the items would not wrap to another line when the window is narrower and the items would just keep on narrowing to fit the width of the container) in Safari, but not in Chrome or Firefox! I have tested this extensively in all three browsers. Perhaps there have been changes in cross-browser compatibility with flexbox properties since this tutorial was created, or cross-browser compatibility was not taken into consideration.
Iain Simmons
Treehouse Moderator 32,305 PointsAs Guil mentioned in the video, if you use the shorthand flex, the flex-basis property will be set to 0 (zero ), so it won't wrap the items, it will continue to shrink down towards a zero width.
The initial value for flex-basis is actually auto, not 0, so if you don't set the flex-basis and only use flex-grow, that's what the value will be.
Jeremy Castanza
12,081 PointsGuil Hernandez, can confirm Maria's findings using Chrome 58. Not specifying the flex-basis value using the short hand flex declaration results in some different behavior from the video. The boxes still break on a different line rather than continue to shrink, with the assumed "0" value for the flex-basis value as a default.
I believe this may be a browser compatibility issue - might be worth comparing the output of Ivan's CSS using Safari and Chrome. If you're getting different results, might be worth updating the teacher's notes to avoid any confusion. Thanks!
ywang04
6,762 PointsAgree with you. The flex items still break on a different line when narrowing the browser using short hand flex in Chrome(Version 61.0.3163.100 (Official Build) (64-bit)), which is very confusing.
/* =================================
Flexbox
==================================== */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}
.item-2 {
flex: 2;
}
Axel Perossa
13,930 PointsIn my case (using Chrome) the flex items shrink up to a minimum, then overflow their container with the accompanying toolbars. I think this is due to this: https://github.com/philipwalton/flexbugs#flexbug-1
In the current version of browsers, the flex items don't shrink below the minimum width of the content, in this case the longest word. Perhaps at the making of the video, the browsers still had this bug and the flex items would shrink to 0.
Ivan Saveliev
9,153 PointsThanks Jonathan,
I agree, best way to understand concept is to play with it :)
Jonathan Grieve
Treehouse Moderator 91,252 PointsI think this happened when Guil used a narrower flex basis value... i.e. 100px. This meant that the browser didn't need to worry about breaking a flex item to a new line and could fit it all one 1. Flex wrap doesn't necessarily push an item to a new line... only when there isn't enough available space.
Hope this helps :)
Jonathan Grieve
Treehouse Moderator 91,252 PointsAlso what I think I gather from the video is that if you use flex as a shorthand property with only one value it resets the flex basis so it does not break to a new line..
Ivan Saveliev
9,153 PointsHi Jonathan,
Thanks a lot for your response, I really appreciate it. As per video, if you use "flex" short hand, basis is defaulted to a "0" value and Guil says that this wont redistribute space in the container that's why it doesn't take multiple lines, nevertheless when I use absolutely the same CSS rules it breaks to several lines :/ First I thought that i misunderstood something re-checked and re-watched the video, but i don't see any discrepancies.
/* =================================
Flexbox
==================================== */
.container {
display: flex;
flex-wrap: wrap;
}
.item {
flex: 1;
}
.item-2 {
flex: 2;
}
These rules will make content to wrap to several lines in my container. I've relaunched Firefox (thought might be something is cached or something, because i use workspaces to follow up the lesson) nothing changed. So I'm a bit lost whether it's me misunderstanding or doing something wrong or maybe something has changed since the video release.
Jonathan Grieve
Treehouse Moderator 91,252 PointsTry removing the item-2 selector in your CSS.
I agree it's a little confusing.
If you're using Workspaces, try saving your work, then closing and reopening your workspace.
Try forking it out to your text editor. It should then try to work with the space on one line as there's no code there to give your flex items a flex basis. :-)
Ivan Saveliev
9,153 PointsIvan Saveliev
9,153 PointsHi Maria, thanks a lot, that's a good point!
ywang04
6,762 Pointsywang04
6,762 PointsMaria, thanks for your info. However, this mentioned bug was found in Internet Explorer 10-11 (fixed in Edge). The issue we found is in Chrome as well. Do you have any comments?