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

Malcolm Stretten
Malcolm Stretten
3,814 Points
Posted by Malcolm Stretten
Malcolm Stretten
3,814 Points

My flex containers DO still re-align themselves into a different format

Guil says that with the css shown below that the items will stay in ever narrower columns. This is NOT what I found. Has anyone else found this? Have the browser specs changed maybe since Guil did this? /* ================================= Flexbox ==================================== */

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

.item { flex: 1; }

David Pretlow
.a{fill-rule:evenodd;}techdegree
David Pretlow
Front End Web Development Techdegree Student 8,603 Points

I'm having the same problem

vftwm
vftwm
17,516 Points

When you add "overflow: hidden;" to the ".item" you get the same effect as Guil. In his example some letters seem to disappear behind the div borders. Maybe "overflow: hidden;" was included in the shorthand back then? I don't know.

Saqib Ishfaq
Saqib Ishfaq
13,912 Points
Saqib Ishfaq
Saqib Ishfaq
13,912 Points

same issue, and surprised to read all this here that, no one has been able to resolve it since this was posted almost a year ago!! using chrome(Version 62.0.3202.89 (Official Build) (64-bit))

9 Answers

docgunthrop
docgunthrop
12,445 Points
docgunthrop
docgunthrop
12,445 Points

I get the same thing. In the video, starting from around 3:50, after Guil sets the 'flex' value to 1 for the 'item' class, his example doesn't break into multiple rows. My flexbox.css is identical to his, but at a certain point, when each flex item gets to around 90px wide, it breaks into multiple rows.

Perhaps it's a change in HTML5 rule behavior? I'm not sure how long ago this course was made.

Robert Papancsev
Robert Papancsev
3,420 Points
Robert Papancsev
Robert Papancsev
3,420 Points

Same issue here with Chrome. Nobody want to correct the video?

Steven Parker
Steven Parker
229,783 Points
Steven Parker
Steven Parker
229,783 Points

:point_right: I can make those columns really narrow.

Do you have some long words or something of fixed size inside your items that force them to wrap?

Malcolm Stretten
Malcolm Stretten
3,814 Points
Malcolm Stretten
Malcolm Stretten
3,814 Points

No- I was just following along with Guil's tutorial. The text/coding is identical to Guil's as far as I can tell.

Jamie Cairns
Jamie Cairns
3,604 Points
Jamie Cairns
Jamie Cairns
3,604 Points

It still wraps to a new line. I'm assuming as there are a few others that have said the same, this must be something that has changed since the video was made.

Lili Köves
Lili Köves
3,471 Points
Lili Köves
Lili Köves
3,471 Points

Found the same, when it gets to narrow for the longest word to fit, it breaks the layout into multiple rows.

ywang04
ywang04
6,762 Points
ywang04
ywang04
6,762 Points

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.

The same problem was discussed here. No conclusion. :(

Chris Komaroff
PLUS
Chris Komaroff
Courses Plus Student 14,198 Points
Chris Komaroff
Chris Komaroff
Courses Plus Student 14,198 Points

Same problem for me. This wraps about about 100px:

.item {
  flex: 1;
}

This also wraps at 100px:

.item {
  flex-grow: 1;
  flex-basis: 0px;
}

Both my chrome and safari do this. I don't get ever narrowing behavior as in video.