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

Jared Cannon
Jared Cannon
3,838 Points
Posted by Jared Cannon
Jared Cannon
3,838 Points

Flex property doesn't behave like shown in video

Hello, when i use the flex:1; property the space still redistributes. Why would this be happening? When I use flex-grow:1; and flex-basis:0; it also redistributes the space. I am very confused why this is happening. I am using Google Chrome.

Thanks

2 Answers

Gilad Goldman
Gilad Goldman
5,639 Points
Gilad Goldman
Gilad Goldman
5,639 Points

I am pretty sure his statement about how they would not break to a new line is ignoring:

flex-wrap: wrap;

If you comment this out your sheet behaves the same as Guil's. More on flex-wrap can be found here

The code that I think Guil has used in the final example (6m30s) is below for your reference

/* ================================= 
  Flexbox
==================================== */

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

.item {
  flex: 1;
}

.item-2 {
  flex: 2;
}```
Boban Talevski
Boban Talevski
24,793 Points
Boban Talevski
Boban Talevski
24,793 Points

In my case (Chrome 64.0.3282.186 on Win 10), without the wrap, the divs are overflowing out of the container at about 540px viewport width, so I don't think Guil has that commented out in the video as it seems he does go below 540px width, but this doesn't happen in his case.

In my case, the divs are simply not becoming any narrower whenever there's a word that needs to be wrapped, and they overflow, or drop on a new line if I have the wrap property enabled. In the video, the words themselves are actually overflowing out of the respective divs which allows for divs to get narrower without breaking on a new line even though he has the wrap property enabled. I do in fact believe his wrap property is active, as I think he wanted to demonstrate that even with wrap active, the divs with flex-basis set to zero would really go down to zero width without breaking on a new line.

I'm thinking of leaving this to browser inconsistencies between then and now and will handle it down the road whenever I need it. Unless Guil Hernandez has something to add of course at this time to clear the confusion :).

Jeremy Antoine
Jeremy Antoine
15,785 Points
Jeremy Antoine
Jeremy Antoine
15,785 Points

Thank you Gilad. You hit the nail on the head!

Adam Dakin
Adam Dakin
7,373 Points
Adam Dakin
Adam Dakin
7,373 Points

If you could add your code here would help. For example you could be using flex-grow and basis on the wrong elements. Make sure they are on the item within the flex not the container.