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 Growing Flex Items

Rebecca Jensen
Rebecca Jensen
11,580 Points
Posted by Rebecca Jensen
Rebecca Jensen
11,580 Points

(CSS Flexbox) - Flex item won't grow

I've got an image and a text div within a flex container. I'd like to increase the space the text div takes up (on medium screen sizes), but flex-grow seems to have no effect. Any idea what my error might be?

HTML:

    <div class="home-div lg-pad"> /* This is the flex container */

        <div>
          <img src="images/rj.jpg" class="rj sm-pad">
        </div>

        <div class="welcome-text sm-pad"> /* So this should be a flex-item, right? */
          <h1>Rebecca Jensen</h1>
          <h3>UX/UI Designer</h3>
          <p>text text text
          </p>
          <p><a href="contact.html" title="Contact me">Contact me!</a></p>
        </div>

    </div>

CSS:

.home-div {
    display: flex;
    max-width: 900px;
    justify-content: center;
    margin: auto;
}

.rj {
    max-height: 500px;
}

.welcome-text {
    flex-grow: 2;
}
Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

I've tried targeting both the div with the image and div with the text, assigning flex-grow to both-- and that's not working.

I don't understand because the two divs inside home-div are definitely the first children of it... and shouldn't those children be flex-items? And don't flex-items take flex-grow values?

I've tried turning off the max-width and margin: auto and anything else that might be conflicting, to no avail.

I think that I'm following the basic principles of how to use flexbox, but it's just not working. Can anyone help?

updated HTML; added a class to the first div to target it:

    <div class="home-div lg-pad">

        <div class="portrait"> /* SHOULD BE A FIRST CHILD? */
          <img src="images/rj.jpg" class="rj sm-pad">
        </div>

        <div class="welcome-text sm-pad"> /* SHOULD BE A FIRST CHILD? */
          <h1>Rebecca Jensen</h1>
          <h3>UX/UI Designer</h3>
          <p>Lots of text here</p>
        </div>

    </div>

updated CSS, targeting both divs (with a huge flex grow number to make sure I can see the effect if it works)

.home-div {
    display: flex;
    max-width: 900px;
    margin: auto;
}

div.portrait {
    flex-grow: 1;
}

div.welcome-text {
    flex-grow: 3;
}

.rj {
    max-height: 500px;
}

2 Answers

Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

Found a fix. I had to set the width of the image to 100% instead of a max-height. Now I have some padding problems, but that does fix the problem of the image not flexing as it should.

Rebecca Jensen
Rebecca Jensen
11,580 Points
Rebecca Jensen
Rebecca Jensen
11,580 Points

ACTUALLY, setting the image width to 100% gave the visual effect I wanted, but did not really address the fact that flex-grow seemed to not be working.

It turns out that when using flex-grow, you need to also set flex-basis to 0%. But when using the shorthand "flex:", the flex-basis is set to a default of 0, so there's no need to add a flex-basis value.