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

Zachary Kaufman
Zachary Kaufman
1,463 Points
Posted by Zachary Kaufman
Zachary Kaufman
1,463 Points

How to?: Overflow an entire div to the next line

I'm trying to expand on the website created in the Introduction to HTML and CSS course by adding more cards, pages, and colors. Whenever I try to add a card though either all of the cards become super skinny and try to fit on one line, or they just overflow outside of the screen. I have tried adding an overflow:scroll; command to the .flex, but it won't work.

HTML

<main class="flex">
              <div class="card">
                <h2>Who am I?</h2>
                <p>I am a student in a small school in Fort Wayne, Indiana, as well as Purdue Fort Wayne (PFW). I am studying Computer Science, and after I graduate High School I plan to study Intelligent Systems Engineering at Indiana University (IU).</p>
              </div> 

              <div class="card">
                <h2>Skills</h2>
                <p>These are the skills that I currently possess (to some degree) that relate to technology in general</p>
                <ul class="skills">
                  <li>3D Printing/CAD</li>
                  <li>Web Development</li>
                  <li>Java Programming</li>
                </ul>
                <p>I plan to expand my current skills and gain new ones through continued self-study and through college this coming fall.</p>
              </div> 

              <div class="card">
                <h2>Goals</h2>
                <p>These are the skills that I hope to learn in the future.</p>
                <ul class="skills">
                  <li>AI/Machine Learning</li>
                  <li>C Programming</li>
                  <li>IoT</li>
                  <li>Circuit Physics</li>
                </ul>
                <p>Most of these I will be learning during my college education at IU next year.</p>
              </div>

    </main>

CSS .flex

.flex {
      display: -ms-flexbox;     /* TWEENER - IE 10 */
      display: inline-flex; 
      max-width: 1200px; 
      -ms-flex-pack: distribute;
      justify-content: space-around;
      margin: 40px auto;
  }

CSS .card

.card {
    margin: 0 40px auto;
    padding: 20px 40px 40px;
    max-width: 80%;
    min-width: 40%;
    text-align: left;
    background: #fff;
    border-bottom: 4px solid #ccc;
    border-radius: 6px;
    transition: all .5s;
}

I have been trying out a lot of different things so if something is very blatantly wrong, please point it out but it's probably just because I was testing something.

THANKS!!!

2 Answers

Steven Parker
Steven Parker
229,732 Points
Steven Parker
Steven Parker
229,732 Points

To allow flex items to wrap to the next line, you need to add this property:

  flex-wrap: wrap;
Zachary Kaufman
Zachary Kaufman
1,463 Points
Zachary Kaufman
Zachary Kaufman
1,463 Points

Thank you so much!! It works perfectly now.

Michael Wyatt
Michael Wyatt
9,057 Points
Michael Wyatt
Michael Wyatt
9,057 Points

Try to add a width on your card.

Zachary Kaufman
Zachary Kaufman
1,463 Points
Zachary Kaufman
Zachary Kaufman
1,463 Points

No change in appearance.

.card {
    margin: 0 40px auto;
    padding: 20px 40px 40px;
    width: 500px;
    max-width: 80%;
    min-width: 40%;
    text-align: left;
    background: #fff;
    border-bottom: 4px solid #ccc;
    border-radius: 6px;
    transition: all .5s;
}