Issue with flex-basis in CSS Flexbox Layout

Question

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.

https://teamtreehouse.com/workspaces/40661998

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>
<html>
<head>
    <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">
</head>
<body>
    <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>
        <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>
        <div class="item-3 item">
            Item 3
            <p>Banksy squid distillery Portland whatever, lo-fi Wes Anderson.</p>
        </div>
        <div class="item-4 item">
            Item 4
            <p>Sriracha raw denim fixie.</p>
        </div>
    </div>
</body>
</html>

/* ================================= 
  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;
}

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

.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.

Welcome to the Treehouse Community

Looking to learn something new?

Tim Loukes

Tim Loukes

Issue with flex-basis in CSS Flexbox Layout

Dan Weru

Dan Weru