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
Tracy Nickel
7,430 PointsOverflow
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
Daniel McNeil
Full Stack JavaScript Techdegree Graduate 26,471 Pointsoverflow: 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.
Gabriel Santos
4,113 PointsHey 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
Tracy Nickel
7,430 PointsI like the article...thank you.
Tracy Nickel
7,430 PointsTracy Nickel
7,430 PointsThe clarification you gave helped get me started on my answer so thank you for the reply.