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
Aaron Selonke
10,323 PointsIn the video the flex-basis property for all three .col divs is 50%....
In the video the flex-basis property for all three .col divs is 50%.... , so why does the third use 100% of the space when it moves under the two other columns??
4 Answers
Chris Freeman
Treehouse Moderator 68,457 PointsWhen the media width is in the midrange (769 - 1025px), the .col are defined at 50%. This forces the row to be overfilled. By also, setting the flex-wrap property, the row will overflow to the next line. In the next line, the third .col starts with an initial value of 50%, but will be fitted to the full width limited by the rest of the CSS properties. With no other constraints, the third .col is expanded to fill the width of the page.
Craig David
Courses Plus Student 1,991 PointsThink of it using pixels instead of percentage and it may help you understand it a little more.
Say for example we had a container with no defined width which is set to wrap, and in that container we have three items that have a flex-basis of 50px pixels, when the container is shrunk down to less than 150px the third item will have then drop down and wrap beneath because we're saying that an item can't be less than 50px wide. If we then set the width of the container to 100px we'd have the same result, with two items of 50px and then the third wrapped beneath taking the full width of the container.
This means we can do the same thing with percentages rather than just using pixels, allowing the container to grow and shrink with the same behavior applied. The container is 100% and an item can't be less than 50%, so two will take up the first row and then the third item will take up full width beneath them.
Louise Rollins
5,739 PointsMy understanding is that setting the flex-basis to 50% essentially means that the items have to take up at LEAST 50% of the container, from that point growing to fill the container as necessary. Can anyone confirm if this is correct?
Laman Mahammadli
2,528 PointsYes, I think so. It is like min-width property. https://www.w3.org/TR/css-flexbox-1 Here it says that "flex-basis is resolved the same way as width in horizontal writing modes".
Zambis Bambis
Courses Plus Student 314 PointsI believe it's due to the fact that flex:grow is still set to 1. It makes the column take up all the free space given to it, since it is alone on the row.
Rick Rana
10,285 PointsRick Rana
10,285 PointsHello Chris,
I'm a little confused. When .col is at 50%, doesn't it size them at half the width? How would that force the row to be overfilled? Seems the columns should fit in the container.
Chris Freeman
Treehouse Moderator 68,457 PointsChris Freeman
Treehouse Moderator 68,457 PointsWith three items each with a
flex-basisof 50% gives 150% of the width. In this case, the third item is wrapped to the next line.James Barrett
13,253 PointsJames Barrett
13,253 PointsHi Chris,
In my opinion, when the 3rd item wraps to the next line it takes up the full width of the container because the flow-grow property is set to '1' for all columns. Am I right in saying that?
Thanks, James.