 Hi there, my friend and friends. These days, horizontal scrolling is becoming something that we're seeing a lot more of than we used to, especially because on touch devices, it's actually pretty easy to do. And one thing that could come in handy is if we had a component that only gets horizontal scrolling, once we had enough content in there, so no horizontal scrolling, add some content, add some content, and then once we sort of hit a certain point, then that scrolling will be added. And I actually had someone on my Discord recently asking how we could sort of dynamically add that horizontal scrolling based on the amount of content we had. So, I made this video exploring how we can do it, and I don't often make video replies to questions in the Discord, but if you are struggling with an individual thing or just with front-end development in general or whatever it is, my Discord is a great place to get help, and the link to that is just in the description if you'd like to join. All right, so CSS column light with Dynamic Overflow X. It's a cool idea. Why is the main container overflowing vertically instead of horizontally? Which is what we're after. You want the Dynamic Overflow X, but right now, why does it work when I have a fixed height on it? It should simply fill the available height it can have and Overflow X dynamically. And this is a good question, and it's something I see a lot. If we look here on the body, the body currently has a max height of 100 SVH, and then the main has a max height of 100%. This is why it's not working, is this. So, we're going to simplify it. I didn't even bring this code into anything else, but we can simplify this down. So, let me just move this into position. And let's set an outer and an inner here. And let's take the outer. We'll give it a border of 10 pixels solid red. And we'll give it a max, or was it a, what was it? Was it a min or a max height that you had on there? It was a max height of 100 SVH. Max height 100 SVH. Then on the dot. See how it hasn't gotten any bigger? And then let's do an inner. And we're going to give this a max height of 100%. So, what is the max height on this? It's 100%. So, it has to match this one, technically speaking. Except it doesn't, because max height will not work unless there's a height here. Because this 100% doesn't know what the height of outer is. And technically this could cause loops, because the problem is the inner is defining the height of the outer. So, if I came in here, and let's just do paragraph times 10 with like lorem 10 or something, just so we get some content coming in here. And so, the height of the inner is defining the height of the outer, which is normal, right? The height auto and everything, the content is what defines the height of something. So, we add content and the height of that thing increases. So, a max height here of 100% is going 100% of the parent. But the parent doesn't technically, it's an undefined height that we have on there right now. So, even if we come here, and we're just going to boost this up. So, we can do paragraph times 20 now. Let's add some content in there. And we're going to get it overflowing out this way. So, it's overflowing out the parent here, as you can see. So, this is hitting its max height. But the child doesn't know, like this, again, this 100%, it can't look at something unless there's a fixed height here. So, if I change this to a height of 100, it's actually going to work. And you had the overflow. Actually, let's go back, because you did have an overflow set of auto. And I just want to make sure we do the same thing as on this one, overflow x of auto. So, let's make sure that's there. Overflow x of auto, because obviously visual is different. And again, we have no difference. If I make this a height of 100 sph, now we get the inner scroll bar here. Because this 100 has something that it can actually focus on and look at now. This is really important if we're doing heights as percentages, you have to have a defined height somewhere for that percentage to be looking at. A max height isn't a defined height, it's a potential maximum that it can reach. But it's basically right. So, this has to look at the height property. It can't look at a min or max value. It has to look at a defined size. If there's no actual defined size, the percentage on a height will not work on a direct child of something. So, let's just simplify this down a little bit. Actually, let's leave it like this and see what happens. Here, we're going to do, let's grab what you had. Columns 40ch, and the gap doesn't really matter. Let's do eight columns of 40ch and see what happens here. And we basically, I'm going to, just because I have a little bit of a scroll bar coming because of my borders and a margin and stuff, let's just make this like 90. And now we will get the dynamic one coming in here. Because as it ends up overflowing, it ends up moving over this way. So, it will work. But you do, it doesn't have to be a fixed height on the inner. You can keep the max height here. But this, if you want to have a height as this, you'll have to do it. Now, because your height here was set in svh and then this is set to 100, we could just, you know, you could take the height off of this and you could do a max height of 100 or I'll do 80 just so it's the same as before svh. And then you get the same behavior. So, that would probably be what you want to do there. So, right, let's take, let's just create a second one underneath this. So, we have my outer and then inside there, we have an inner. Maybe there's a reason you can't do it this way with the height being defined here, but this is sort of what we'd have to do. So, here we can do paragraph times three with some lorem in them. And this will be fine. It's going to work as you want it. We got our two columns showing up, no problems. And it's short. It's matching what we have in there. But then, as we add more content in there, so let's just come here p times three with lorem once again, and then we'll copy and paste add more content after this. So, it's still growing. It's still working the way we want it to. But then at one point, let's just paste this one more time. Let's see what happens. Hit save there. So, we refresh the whole page. We still haven't hit that. So, we're going to do a couple more pastes. But eventually, we'll just paste a couple of times there. Eventually, this one does end up getting the overflow going this way dynamically. It's really important. A max height as a percentage has to look at a defined height on the parent, just because there's that relationship between the height of the children and the height of the parent. So, if the parent, right, because the child is defining the height and then it just becomes a bit of circular logic, if it's based on a maximum height, it doesn't know when it's hit that max height if that makes sense. It's sort of the max height or a min height sort of acting as a clamp, and the child can't know if it's hit that clamp or not, because it's the one defining the height of the parent. So, we need to do it this way around. Instead, I hope that makes sense, and I hope it helps you out. If you create something like that, hopefully it looks a little bit prettier than what we just threw together. And one of the ways we can make it look a lot prettier is by giving it some custom scroll bars. And if you're not really sure how to do that, well, I've covered it in a previous video that is right here for your viewing pleasure. And with that, I'd really like to thank my enablers of awesome who are Philip, Andrew, Simon, Tim, and Johnny, as well as all my other patrons for their monthly support. And of course, until next time, don't forget to make your corner of the internet just a little bit more awesome.