I’m making a rough layout of a site based on an example and they include overflow-x: hidden on the universal selector *. It has a drastic effect on the layout of the page but I don’t understand why. I thought that applying overflow-x: hidden would simply clip what wouldn’t fit. But here it seems to completely re-format the page layout. Please see these 2 examples which are identical except that one includes overflow-x: hidden and the other doesn’t.
With overflow-x:
https://codepen.io/El_Escandalo/pen/ExVbwzm
Without:
https://codepen.io/El_Escandalo/pen/BaomJYZ
Any insight would be appreciated!
I’m going to attempt to help you since you haven’t gotten a response so far. Hopefully I don’t confuse you even more and hopefully you’re still on FCC.
The overflow property DOES and IS clipping the excess in each container. Although the two pages look different at first glance, the only real difference between the two pens is with the nav element.
The first thing pen without overflow you’re actually seeing the content spill outside of the container. You can see this buy updating the background color on nav and .navbar a.
Next, let’s look at the overflow property. Remember overflow: visible happens by default (which is why you’re see it spilling out of the container in the picture above. Now, let’s work on putting the links inside the container. To do that we invoke the overflow command. For demonstration purposes I added * {overflow: scroll;}
The first thing you’ll notice is adding overflow into CSS resulted in the links being inside the container. In the picture you’ll also see the scroll bars on both the X and Y axises (which I’ve labeled). To reduce the extra space under each link you can change *{overflow: scroll;} to * {overflow-X: hidden;} or * {overflow: hidden;} . NOTE: overflow-X and overflow:hidden will be the same in this case because each link is short and doesn’t span multiple lines.
Let me know if you have anymore questions.
1 Like
Thanks I really appreciate it!
