CSS CSS Flexbox Layout Flexbox Properties Smarter Layouts with flex-basis and flex

Ivan Saveliev
Ivan Saveliev
9,153 Points

Why 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

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 85,148 Points

I 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
Jonathan Grieve
Treehouse Moderator 85,148 Points

Also 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
Ivan Saveliev
9,153 Points

Hi 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
Jonathan Grieve
Treehouse Moderator 85,148 Points

Try 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
Ivan Saveliev
9,153 Points

Thanks Jonathan,

I agree, best way to understand concept is to play with it :)

As 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.

Maria Campbell
Maria Campbell
8,641 Points

It'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.

Maria Campbell
Maria Campbell
8,641 Points

Ivan 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.

Ivan Saveliev
Ivan Saveliev
9,153 Points

Hi Maria, thanks a lot, that's a good point!

ywang04
ywang04
6,735 Points

Maria, 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?

Jeremy Castanza
Jeremy Castanza
12,075 Points

Guil 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
ywang04
6,735 Points

Agree 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;
}

In 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.