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

Adam Duffy
Adam Duffy
4,466 Points
Posted by Adam Duffy
Adam Duffy
4,466 Points

My <h2> tag and <p> tags are content are overflowing their flex container. Why is this happening and how do I fix it?

This is a personal barber website I am working on. My issue is with flexbox specifically.

2 Answers

Dmitry Polyakov
Dmitry Polyakov
4,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 Points

If you apply flex-wrap: wrap; on your flex container this might help

Adam Duffy
Adam Duffy
4,466 Points
Adam Duffy
Adam Duffy
4,466 Points

I've already applied flex-wrap to them and it still spills out.

Dmitry Polyakov
Dmitry Polyakov
4,989 Points
Dmitry Polyakov
Dmitry Polyakov
4,989 Points

It should be applied to a container, not elements inside the container

Adam Duffy
Adam Duffy
4,466 Points
Adam Duffy
Adam Duffy
4,466 Points

My parent container is set to display: flex; / flex-direction: column; / flex-wrap: wrap;

The issue is the content inside the items contained within the parent spills out when the width is reduced small enough.

So I applied the same properties to the items within the container but the content still spills out.