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


Issue with flex-basis in CSS Flexbox Layout

In the Smarter Layouts with flex-basis and flex course as part of the CSS Flexbox Layout track, at around 3:45, Guil Hernandez states that when the flex value is set to 1 (in the shorthand version), flex-basis automatically sets to 0, so the contents of the container will redistribute rather than wrap to a new line. I have used the code exactly as shown in the video and it does not work as shown, it, in fact, does wrap to a new line. I have tried explicitly setting the flex-basis to 0 and it is the same result. I have read all the questions related to this and all of them are saying the same thing but there is no definitive answer as to why it is behaving this way. I also ran this by all the other students on my course and no-one here can make sense of it either. Additionally, I tried this in Chrome, Firefox, Edge and using the downloaded files in Atom as well as the Treehouse workspaces and it still behaves in the way I described above. Not sure if this is a bug or a mistake in the video but I thought I would alert you to the fact. Many thanks.


Edit: Link to the workspace and a bit of clarification. What happens in the video is, the columns stay on the same line no matter the browser width but with my workspace, the fourth column wraps to the next line. I can achieve the desired result with overflow: hidden; in the .container rule but that is not what Guil has in his code.

That's odd, I just tried it again and it did work but yes no worries. Apologies if it is formatted incorrectly.

<!DOCTYPE html>
    <title>Flexbox Layout</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/page.css">
    <link rel="stylesheet" href="css/flexbox.css">
    <div class="container">
        <div class="item-1 item">
            Item 1
            <p>Mustache cred 3 wolf moon shabby chic, flannel vegan Godard selfies aesthetic taxidermy post-ironic forage deep v tousled.</p>
        <div class="item-2 item">
            Item 2
            <p>Vegan meggings hashtag, before they sold out Pitchfork next level vinyl. Fanny pack direct trade High Life.</p>
            <p>Bicycle rights mumblecore irony disrupt.</p>
        <div class="item-3 item">
            Item 3
            <p>Banksy squid distillery Portland whatever, lo-fi Wes Anderson.</p>
        <div class="item-4 item">
            Item 4
            <p>Sriracha raw denim fixie.</p>
/* ================================= 
  Page Styles
==================================== */

* {
    box-sizing: border-box;
body {
    font-size: 1.35em;
    font-family: 'Varela Round', sans-serif;
    color: #fff;
    background: #e8e9e9;
    padding-left: 5%;
    padding-right: 5%;
p {
    font-size: 15px;
    line-height: 1.5;
.container {
    margin: 45px auto;
    padding: 10px;
    background: #fff;
  border-radius: 5px;
  box-shadow: 0 1.5px 0 0 rgba(0,0,0,0.1);
.item {
    color: #fff;
    padding: 15px;
    margin: 5px;    
    background: #3db5da;
    border-radius: 3px;
/* ================================= 
==================================== */

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

.item {
  flex: 1;

I know the flex-wrap is set to wrap but that is the code Guil has in the video so...

Up to this point everything had been going fine and we had only been modifying the flexbox.css file. If anyone can figure this out I'd be most grateful.

Dan Weru
Dan Weru
47,649 Points


Could you include your css code here? The link you doesn't open the workspace.