Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.