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 The Solution

Overflow

In Practice the CSS Box Model video Guil uses overflow: auto to scroll the text. He said we could also use overflow: scroll and overflow-y: scroll.

In the course CSS Basics there was a conversation after one of the videos where they were discussing using overflow-x: hidden.

Can anyone explain these differences? Which is the one to use for best practice purposes?

Thank you.

2 Answers

overflow: scroll will give you a horizontal and vertical scroll bar.
overflow-x: scroll will give you a horizontal scroll bar only.
overflow-y: scroll will give you a vertical scroll bar only.

Which one to use depends on the amount of content that you have compared to the the size of its container. You may have to experiment a bit to see which one gives you the best layout on your page.

The clarification you gave helped get me started on my answer so thank you for the reply.

Gabriel Santos
Gabriel Santos
4,113 Points

Hey Tracy,

The property ‘overflow’ tells the browser what happens if any content overflows an element’s box. In addition, it also tells the browser whether to clip content or to add scrollbars if the content is too big for the element.

Here they explain it better: https://www.w3schools.com/css/css_overflow.asp

I like the article...thank you.