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

Vasilis Moutzouridis
Vasilis Moutzouridis
4,450 Points

flex-basis: 0; | items break to new lines.

it seems that items cannot shrink to 0 pixels and they break to new lines with a flex-basis set to 0;

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

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

whats wrong ?

2 Answers

Dmitry Polyakov
Dmitry Polyakov
4,926 Points

Container is set up as flex-wrap: wrap. This attribute makes all items inside the container to wrap onto a new line.

Try flex-wrap: no-wrap

Zach Hetrick
Zach Hetrick
Front End Web Development Techdegree Student 7,803 Points

Vasilis,

You're right! My guess is Guil was using an older version of Chrome? You can see Guil has 'flex-wrap: wrap' and when he sets his flex-basis to 0, his flex-items do not wrap, but mine do and it seems that yours do too. As far as I can tell, the only way to get them to not wrap is to set flex-wrap to nowrap.