Practical Use-Cases for “overflow: clip;”

Do you know what the difference is between “overflow: hidden” and “overflow: clip”? And more importantly, what are the practical use cases for “overflow: clip”? Here's what you need to know. Long story short, “overflow: hidden” creates a scrollbox even without scrollbars. Here's what this means in the practical terms. In this demo, I have a container, and within that container, I have a box — this yellow thingy. And this box, as you clearly see, is going outside of the bounds of the container. Do you know what will happen if I set “overflow-y” to “hidden”? Logically, this part should be hidden. Just as well, if I set “overflow-x” to “hidden”, then this part of the container should be hidden. Actually, that's not the case at all. I will set “overflow-y” to “hidden”. Even though we've hidden “overflow” just on the Y axis, X is cut as well. The same thing happens for the overflow-x. That's precisely what the scrollbox that I mentioned means. It's actually even more complicated than this. I will open the console. I will target my container: “document. querySelector(‘. container’)” and I will set its “scrollTop” to “200”. As you see in the demo, the container moved; we did actually scroll it. And that is probably not what we want when we set “overflow-y” to “hidden. ” You guessed it, this is precisely the problem that the “clip” value solves. I will close the console, and instead of “hidden”, I will set the value to “clip”. And now we get precisely the result that we want, only overflow Y is cut off. Overflow X is still visible. The container is overflowing. The same thing happens if I set “overflow-x” to “clip” — only the X-axis will be cut off, the Y-axis will overflow. In practical terms, if you're working with JavaScript and if you're triggering scroll events or if you're setting scroll manually, then clip value can be really helpful and handy because it can save you unwanted effects or unwanted scrolls on various containers. A better example that you've seen countless times is with hero sections and images that need to overflow only on one axis. Let's say that this is the hero section, and to add a little bit more visual depth, we want the image to overflow from the section only on one side, on the bottom side. We don't want it to overflow on the X side because we don't want to introduce horizontal scrollbars on the page, but we do want to allow the image to go outside of the bounds of the container on the Y-axis. Now you know how to trivially solve this using the “clip” value. The clip value for the overflow property is in the Baseline, which means that you can safely use it today without thinking about fallback values or about browser support. Thank you so much for your attention. My name is Zoran Jambor. I will see and hear you in a different overflow value. Or rather, in the next video — and specifically, in this one.