Fix ugly text wrapping with this simple CSS trick

Key Takeaways

you have a couple of buttons in a flex container and ideally you want them to be the same size because they're Flex items we can say they're both Flex one and then they're both going to grow to fill the available space but we get annoying text wraps as things get a little bit narrower and that's really ugly one of the common solutions for this is a text wrap no wrap which sort of works except it has the potential for causing overflows which we obviously don't want we could go all the way up to the parent and say that we have a flex wrap of wrap and that sort of fixes the problem at medium screens but at one point you will still potentially get overflow which sucks but there is a solu tion to this that is actually really simple so let's take off this no wrap that's right here and then on this Flex group where we're declaring the flex one I'm also going to say that they have a minwidth of fit content and this is really cool because they're going to work exactly as they were before but if they don't have enough room they'll wrap down but well maintaining one line and then if ever there really really isn't enough room then the text will wrap and you'll never run into overflow issues if you want more of an explanation on how this actually is working there is a longer video that is right here that you can check out