 You've seen this meme and well it sort of pokes fun at CSS. It actually is highlighting one of the features of CSS which is also one of the things that is just a fundamental concept of the web which is by default we should have no data loss. So this overflow that is happening right here is actually very intentional and of course we could just do an overflow hidden and hide that content that is overflowing and as the author of the CSS we do have that choice. And while using overflow hidden can sometimes be useful in situations like this with text it's probably worse than the overflow that we were having. So let's take a look at four different ways that we can fix this problem that are a lot more useful than overflow hidden. Hello there my front-end friends and welcome back to the channel. If you're new here my name is Kevin and well I try and help you realize that yes CSS really is awesome and let's do that by diving into this problem that we have right here and coming up with these different solutions that we can do to solve it and prevent the overflow or deal with the overflow in different ways. The first thing we have to look at that was why is this even happening and this is happening because I have a fixed width there. If I take this fixed width off of here of course it fixes itself and it worked but I'm going to assume that for now at least we need a fixed width on there or the width that you know we're putting something in a sidebar and it has a limited amount of space and the word is too long to fit. Now our overflow hidden was flawed but we could use another type of overflow with an overflow x and introduce scrolling so at least that content is still visible even though it sort of doesn't really fit and of course we could give custom styling to the scroll bar to make it look a little bit nicer. Now if this is to solve an issue with type like we have here another option that we do have is overflow wrap break word. While it works it isn't exactly an ideal solution because it can make things a little bit hard to read especially without any hyphenation in there but it is a quick fix to prevent any overflow issues and side scrolling on a site that might end up running into problems. You could also try and bring in hyphenation as well but hyphenation is one of those hit and miss things when it comes to CSS. If we switch the width to 50% here we can actually just see how this is working and you can tell it's not always the best solution. The word is is dropping down there because it sees that it can fit down there without breaking the word but when it comes to words where it has to break it just breaks it wherever it can but this can prevent big issues and side scrolling from happening so every now and then this might be what you want to reach for. Now moving away from the idea that we are stuck with a width of 260 pixels one option would be to switch this to either use min content or fixed content. Min content will make the width of the element as small as it possibly can so it will match the length of the largest word that is in there and if we make this bigger or smaller it really doesn't matter the width is based on the smallest it can possibly get which is being in this case dictated by the word awesome or if we switch that over to a fit content you can see it's actually stretching the size here but on larger lines if everything can be strung out on a single line it will fit that but if it needs to allow for some wrapping it will and then eventually in these cases it can't get any smaller than that the same as a min width it can't get smaller than the content that is inside of it. Now going back to having a fixed width we get to what is maybe my favorite solution of them all as long as you don't mind throwing browser support out the window and bringing in container queries or more specifically container query units and I said browser support's not perfect it is already over 73% really fast we do have the div of CSS is awesome and inside of there is a paragraph with the text this is important because of how container queries work where we're going to take the parent and we're going to tell it that that is my container and we do that by saying container type inline size now what I can do is select that paragraph in my CSS and then I can give it a font size that is using container query inline so it is looking at the inline size of the parent and now we can see how the text can adapt to the size of its parent we can turn the parent back into a square by using aspect ratio maybe we want to center the text within the parent so we can use grid for that and if we want to be extra safe we could use a max function to prevent the font size from getting too small or we could do a clamp that would prevent the font size from getting too small or too big of course if you're preventing it from getting too small that could potentially cause some overflow issues but if your minimum size is small enough it should never actually be an issue and if you enjoyed this video and you would like to learn more about container queries I have a video right here for your viewing pleasure and with that I would like to thank my enablers of awesome Jen Johnny Michael Mr Dave Patrick Simon and Tim as well as all my other patrons for their monthly support and of course until next time don't forget to make your corner the internet just a little bit more awesome