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

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

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,911 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

Steven Parker
Steven Parker
186,662 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

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

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.

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

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

Robert Papancsev
Robert Papancsev
3,420 Points

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

ywang04
ywang04
6,735 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
PRO
Chris Komaroff
Pro Student 13,667 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.