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
Hugo M
4,517 PointsWhat exactly does overflow: auto do?
I think I understand how the "clear" function works, but I'm a bit confused as to how overflow: auto achieves the same thing in this situation. I looked at the documentation on MDN but it didn't make much sense to me.
Thanks :)
3 Answers
Hugo M
4,517 PointsHi guys, thanks for the replies. I've done some fiddling and figured out the following.
In this tutorial the overflow: auto; command is defaulting to the overflow: hidden command. What's confusing is that in this case nothing is actually being hidden.
The reason we can use overflow: auto (or overflow: hidden) to solve the margin collapse without actually hiding anything is that our parent element doesn't have a fixed height so it simply expands to accommodate the floating child elements.
If the element had a fixed height (say 100px) then you would actually only see the top 100px of the floating child elements and anything spilling outside the parent element would simply be cut off. If you want to add a scroll bar to the element to see more of the floating child elements then you must use overflow: scroll;.
Cheers!
Hugo.
MUZ141096 Martin Mushangwe
6,859 PointsThe "overflow" property controls content that breaks outside of its boundaries. So the "auto" value ensures that when the content proceeds outside of its box the content gets hidden whilst a scroll bar becomes visible for users to read the rest of the content.
Dustin Wilder
765 PointsMartin is correct. Overflow is used when the content "overflows" and spills out of the area it is provided with. Therefore if you set overflow to let's say, visible. When setting overflow to visible it lets the content spill out of its box or provided area making it look very sloppy or unorganized. Though when you set overflow to auto it recognizes when the content is overflowing or spilling out of it's content box therefore hiding the overflowed material and compensating with a scrollbar.
Hope this helps! -DW
Hugo M
4,517 PointsWhat was confusing to me was that when using overflow: hidden, nothing was being hidden. I've figured out this was because the parent element didn't have a fixed height so it could simply expand to accomodate the floating elements. If it did have a fixed height then we would start to see bits of the floating elements being clipped off.
Callum Anderson
8,837 PointsCallum Anderson
8,837 PointsI have to say I'm still very unclear on this, but your answer helps a little Hugo.
My understanding of the overflow property is that it applies when the content exceeds the size of it's container (parent element). So if the content was about 150px and the container 100px, you'd see:
(set to Hidden) the first 100px of the content, and the rest would be hidden. (set to Auto) the full 150px of the content, with a scroll bar to scroll down. (set to Scroll) the full 150px of the content, with a scroll bar to scroll down. Incidentally, if the content were only 90px, I believe the scroll bar would still be there when specifying Scroll.
If no height is specified on the container, then overflow is not required as the container will expand to accommodate it's content.
What I don't understand is what's happening when you float child elements out of the document flow.