 Hi there, my friend and friends. A while ago, Adam Wethen, the creator of Tailwind shared this tweet and it resulted in quite a few people asking me what I thought about this idea. And then Theo made a video looking at why he thinks it's actually a really good idea and you can watch that video. I've linked it down in the description. He does a nice job of explaining why he thinks it's actually a better behavior. And that video actually got a whole bunch of people asking me about it, especially on my Discord community where we had a bit of a discussion about it. And then Theo put out one more tweet about it that this time got quite a bit of attention, at least with people pointing it in my direction and asking me what I thought about it. And whether I think that it actually is a reason why CSS is bad and clearly I don't. But I do understand why people get frustrated with it. This is clearly a behavior that annoys a lot of people, like Theo, who's clearly frustrated by what's going on. And I know he isn't alone. And if you know me, then you know I'm all about helping people fall in love with CSS. So when people get frustrated with it, that makes me a little bit sad. So this is going to be a little bit less of my opinion on whether or not I think you should do the min with zero on your universal selector or not, though I will share what I think about that. But it's going to be more of a deep dive into how the flex algorithm actually works and why, you know, that potentially fixes some things, but the other side effects of it as well. And so while this is not great for the YouTube algorithm, here's the type of person who just likes to throw a display flex on things and be happy that it works and then move on from there. This video is definitely not for you, because we're really going to be deep diving how flexbox works and why it works the way it does. And then we can be less mad at CSS. And if by the end of this video, if only one person is like, Oh yeah, you get it now after watching this, then I'll definitely feel like it is mission accomplished. And I'm really sorry for the long intro, but with all of that out of the way, let's dive into some actual code here. And take a look. And we're going to start with this form example that's right here, just because it's what Theo looked at, because this is often, these inputs are where the issues, people find these issues to start with. Definitely is one of the weird things with inputs or problematic areas, I guess. So just really fast, I have these form groups set up. So my form group there that has a label and an input and I have a display flex with a gap on there. So they go next to one another. Nice and simple. The only issue is we can overflow my form. And that's weird, because we're using flex and the default for flex is to shrink things and they're not shrinking. That's crappy. And it's 100% frustrating. I'll agree. But let's see why this is actually happening. So I'm going to, for this, we're going to turn off the form for now and we'll probably come back to it at one point, maybe I'm not 100% sure. But we're going to go into this very simple example instead to start with. So this example, we have a green box, that's my div there, and then we have these two paragraphs in there. And for now, actually, let's turn that off, but I have a display of flex coming on here. And what I want to do is look at how display flex is actually working. So to do that, I am in Firefox now because as much as I like Chrome's DevTools, they've come a long way for CSS stuff, there's a few things that are still in Firefox that aren't anywhere else yet. And what's happening here in the DevTools is it shows us what's happening. It's in the layout tab, it's right here, it's fantastic. And it shows us we have a content size, we have the flex shrink on here, and it explains everything that's going on. And basically when we do a display flex, flex box, happy to let elements just do their own thing. They're just going to have their content, they shrink down basically to the size of the content that's inside of them. And that's really important, we're going to come back to that. But it matches the size of the content itself. It's sort of like if you do a display fixed or absolute, that same behavior happens. So instead of being, you know, before if we don't have a display flex, of course they're block elements, so they just take up all the available space and as soon as we do the display flex, they shrink down to the size of the content in them. And then as the viewport gets smaller, or the space for them to live in gets smaller, they'll wrap and they'll sort of continue shrinking because we have a flex shrink. But how does it figure out how to shrink the items? Because this first one here, this paragraph there, is currently shrinking by 31.4 pixels. And the second paragraph here is shrinking by 90 pixels. So how is it figuring that out? Well, what it's doing is it's looking at this content size. Content size is, as I said, if we, let's bring this bigger again, the content size is how long the content is in there if the content is taking up as much space as it can. That would be the same. Let's just come into my CSS here for a second. I don't need this resize both. I was going to do something with that. That was a bad idea, so we'll take that off of there. But that would be the same here as on my paragraphs that are inside of there. So here's my paragraphs with the red on there. On these paragraphs that are inside of there, we could do a width of max content. And if I say width max content, and let's take off my display flex, content is the width of the element is the same size as the content that is inside of it. And this is a huge part into how Flex is working. And obviously, this isn't addressing the shrink issue that we're having, but we're going to get back around to that in a bit. But this is, Flexbox is going, okay, this is how big this content is, and this is how big this content is. So it's effectively figuring this out behind the scenes, what the width max content would be, or the intrinsic max size of the content itself. And then if there's, it's going to make it go to that size if there's enough room, but if there's not enough room, it's going to start shrinking things. And it's looking at what's the ratio between those two elements because that first paragraph, the content size was 165, the second paragraph had the content size of, and it made this too small, so we're in, there we go. It was in the mobile view there for CodePen. But we have the 475 and we have the 165. And it wants to keep that ratio between the two elements as they're shrinking down. It's not quite four to one. Obviously, maybe it's like closer to three to one or whatever, bad at math, it doesn't matter. Say it's three to one. It wants to keep that three to one ratio as the space is reducing here. So they're shrinking at the same rate, but sort of keeping the same ratio between the content. Where things get a bit more interesting though is if I continue shrinking this, continue shrinking this, and continue shrinking it at one point, we're getting some overflow on this one. And that's because this one here has the really long word in it. Great name, right Kevin? But you'll notice when that happens, and actually probably happening on both of these, this one actually happened earlier, where it hit this, see there's like a lock here, and it's saying we're not shrinking down below that size. That's the smallest this can get. I never set a min size on it, but every element has an intrinsic minimum size. And this is very important to how Flexbox works as well, because it will not shrink smaller than that intrinsic minimum size. And that's because it doesn't want the element to be smaller than the content that is inside of that element, because then weird stuff happens. And we'll see what that is in a second. But yeah, that's why here actually, we can even see it a little bit better here. They're both shrinking at the same rate, they're shrinking at the same rate. But then this one, when we get to the length of the word content here, which is the intrinsic minimum size of that element, that this one stops shrinking. It's we've locked in now. The other one, we haven't hit any point yet. So this one, it continues to shrink. And you can see that that one's still squishy, even though this one is locked in. That makes a lot of sense, right? Like just without thinking about it, this behavior is logical, right? And then eventually we'll hit sort of this one here as well. But while we're in this happy world over here, like everybody's happy with that behavior that's happening right here. So let's go and put this min width of zero on here just to explore what happens when we do that. And now as we shrink down, it's going to be very, very similar, except this one continues to shrink at the same rate because we don't have that intrinsic minimum size. When I'm saying intrinsic, it means like we never told it to be that big. It's this flex box looked at that element and said there's content in here that won't break. I don't want to like, I can't break this word in half because you never told me to. So that's the intrinsic minimum size for it. As soon as I turn that off, this element becomes fully squishy. So even though there's all this extra room living over here, it's going to continue to shrink because we've said, no, forget that intrinsic minimum size. You're allowed to get to zero now. So it continues to shrink, even though it would make sense in this case to prevent this from shrinking and allow this one to continue to shrink. And this is, to me, one of the issues with this min width of zero here is that you run into a lot more possibility of these weird overflows from happening because usually the text in a paragraph can't overflow outside of the paragraph itself. You can have elements overflowing in CSS, right? That's normal. We're causing that. If we get small enough here, or actually it won't happen now with this min width zero, but it's very normal in CSS to, if you muck things up and do something wrong, that things will overflow out of their parent. It's annoying, potentially. But a big part of that is just what the web is based on with the idea that we'd rather have overflows than clipped content and other things like that. You have to scroll to see the content is better than just hiding content. At least that's how the web has always been looked at and always been built on. If you disagree with that, it's fundamentally different argument. But it's just from day one, basically what the web has been built on is that you don't want to lose any information. It's better to have overflows and other stuff happening as a default, just so the content is always there and the user can always get it. With that done, hopefully that makes a little bit of sense on why it does what it does. Because we want to stop... When there's multiple things at play and you don't just have this two-column setup, you want certain things to stop shrinking at other times, even though another thing might be continuing to shrink. This is, for the most part, going to be what you're used to doing and figuring out. And you can even see the intrinsic min size I did a max size before, but let's turn off this display flex again and go on those paragraphs. In my example, it was right here. We can say it has a width of min content as well. And you can see what the intrinsic minimum size... I just turned off the display flex on the wrong thing. But you can see what the intrinsic minimum size of any element is. So that it's based on the word content. This one it's based on really long word. And so Flexbox will see this always as the smallest it will let something get. Unless, of course, we tell it it's allowed to get smaller. But this is, by default, the smallest. And then you have the max content right here where that's what it's using to figure out the math on how to shrink things. How big should everything be if it was on a single line? And then we shrink them all down from there based on these ratios, but clamp them and make sure they don't get smaller than their intrinsic minimum size. Cool. So with that done, let's look at... This is a bit of a silly example. We'll see a bit more of like a real world one now and bring all of these same principles in play and dive into it a bit more and then look at the annoyance of the form as well. But this is a really common thing. We're going to actually... I have some CSS here for something I don't need because I decided to take it out of this demo for these cards here. But we're going to look at these columns that are right here. And this is really common just, you know, you do a display flex and you get columns. Nothing too complicated, right? Just some... I have a div. Each one only has one paragraph. So I guess I don't need the dibs, but whatever. We get those columns. Each one of these is a column. Nothing too complicated. And so if you... If we come in here and we have that display flex on there and you go and you open it up, let's do an inspect on there. And let's go on my div here. And if you look, you're going to see these massive negative numbers, right? So here the flexibility, flex shrink, negative 1700 pixels. This one's going to be negative 1850, negative 1957. And you can see the content size on these. So it's looking at how big should the content on each one of these be? How big is it if we had that Mac content? There's one single line. And you can actually see this. Let's even look at this. If we come onto here, not my examples, sorry, columns, everything in here, I have a... Let's just do a flex shrink of zero. So we're going to turn off shrinking. And each one of those elements now is this super long string that just shoots across the page. So it's looking at the content size. But then it's going and looking at this parent here. And so that parent that's right here, it has a size of if we go down 823 pixels. Huh. So we have 823 pixels here for this parent that's right below me, right? And then we have these giant things here. So flexbox is going, okay, we're going to figure out how small we need to make each one of these because clearly they don't fit. We're overflowing. Shrink is allowed. So well now shrink is allowed. That's the default. Everything shrinks down and it wants to keep that same ratio of what the content was. So this was 21. This was 19. And this is 22. So, you know, they're not all exactly the same size. So a lot of the time, if you do a display flex, the three children that are in there, there's often very small differences in how big they actually are. Sometimes there can actually be very big differences because it's based on keeping those same ratios that they were before. And we're not going to dive into the math. I've done this before in previous videos, but, you know, you can add up all those numbers, figure out like the percentage of each one, and then it's just going to keep those percentages as everything shrinks down. Except this middle one, because we have, because we have that really long word that's in here is hitting that the lock is on that one, where it's not on these two. These can continue to shrink as this space gets smaller. But because we have that long word in here, we've sort of hit that intrinsic minimum size for this middle column. Once again, we could come in here and get rid of that. We can say I'm in with zero. And now the, there's no more lock. They're all shrinking down. They're all keeping that ratio that you wanted them to keep. You feel like it's potentially working better. But now we run into this issue where you're getting the text overflowing outside and it's going into your other columns. That's sort of crappy, at least in my opinion. Because if we get small enough, then like the text from this one starts going into the text of that one. I would much rather have three columns that are not the same size, even though like my designer gave me three equal columns. I'd much rather have three on equal columns where the user can read the text. One common thing that I do also here with this is where you can come in with the word, where is it? I had it right here. Word break, right? You can break words. The problem with breaking words is it's going to break every word. So it's not only breaking that long word. Let's look at the word sit right here. As this gets smaller, at one point, sit is now breaking over the two lines, even though it's only three letters long. Didn't have to break that word, but I said you're allowed to break all, so it's going to break out. It's going to break all. And if you want to complain about one thing at the end of this video about how CSS works, complain about how hyphenation and word wrapping and all of that is crap. That 100%, I'll agree with you on. It's strange that we haven't come up with a solution to that yet. I know they're working on it. There's very smart people doing a lot on that side of things, but the current state of it is frustrating, and I'm sure there's German listeners that are even more frustrated with it than I am because there's some long words in German that we don't have to deal with in English. So the word break all to me is not really a solution. I find it's more problematic than other things. It's one of those things you can use in very specific situations. And of course, there's manual ways of fixing a lot of these things too, but nobody wants to manually try and fix these because that's a nightmare. And obviously not very realistic in a lot of different situations. Now, you might be going one or the other isn't really the best or worst situation, right? Like you don't like this one. You don't like the other one, but to me, there's one other big downside to this min width of zero. And so I'm going to turn it off for one second. And we're going to get our on equal columns. And one way you can sort of fix on equal columns is by saying the flex one, right? So let's take off my flex shrink. It's already there. We can do a flex one. It's not going to perfectly fix it, but it does like here, you'll get closer similarities. This is a very common thing. Flex one on your flex items, they more or less become equal most of the time. And the reason that works is now we've actually set their flex basis to zero. If you come and take a look in here, the they're not shrinking anymore. If I look in my layout, they're now growing because we've set their flex basis to zero and we've set their flex grow to one. And it works well. It does a nice job of giving you balanced out columns. Even though their flex basis is zero, they still have that like intrinsic minimum size on them that's really important. And we'll look at why that is because for me, I'm somebody who likes flex wrap. Now for columns like this, it's probably not the best example just because you probably wouldn't use a flex wrap here. But I do want to highlight flex wrap is great because as we run out of room, the content can just wrap down. I don't need media queries, probably getting a little too small there, but you get the idea, right? We everything eventually stacks and we sort of get something an intrinsic layer where we don't need media queries, which is always fantastic. The thing is, if I say min with zero, well, we don't have that anymore. We can still get a flex basis to work and stuff, but we just end up to this squishy world where everything just sort of ends up smushing into each other and it shrinks on forever because they're allowed to get down to zero pixels in size. Whereas when I don't have this elements sort of aren't. We still have that intrinsic minimum size that they're not supposed to get smaller than, which in my opinion is a good thing, right? So it just makes my life easier when I'm using things like flex wrap where it's allowing things to wrap down before they're getting too squishy. This works, if you try other things with like shorter bits of text, the flex wrap will work fine. It's when you run into these things where you have larger things where there's already shrinking going on, that's where the problems arise. So it does depend on the situation. Again, with this specific example, it's a little weird, but even with cards or something else like that, you might want the situation where you want things to wrap. And as long as you have a bit of content in those things that are wrapping, you're opening up this door where they're not going to wrap because they're never hitting the point where they need to wrap because they're just getting, they're allowed to get down to zero. And to me, that is kind of annoying. Now, going back to the forms, what I want to look at is two things. So here, we'll turn these form back on. Why did it happen in the forms in the first place? Why are these shooting out the side? So why is this happening? Well, it's the same reason that the word name isn't shrinking anymore. These elements, input elements, and maybe if you're going to complain about something, it's just that we have to deal with things that were created before layout on the web was a thing. And changing the behavior of those could potentially break basically every site ever because this is how everybody built things is taking these into account. And so the word name is a single word. So it's not going to wrap, right? And let's just turn on my inspector once again. And let's look on there. We'll turn on the flex there. And like this is the size, the smallest that this can get without, you know, we don't have word break on. So that's the smallest it will get. If let's just even come in here and let's do name, you know, let's say your name, because that will change things. Now this area should be able to flex and grow a little bit. We'll turn that flex visualizer back on. And as it's running out of space, at one point, look at that, this is actually shrinking down more. So it is shrinking, and you can even see down here where we have this shrink going on because it's allowed to continue shrinking or then growing back up and we get the squishiness that's happening right there because this element can. Because it's not just, you know, we have two words, we can get that wrap. And then once we have the wrap, there's some extra space and that space can shrink and grow in a little bit. Whereas when it's only the word name, that can't happen because it has an intrinsic minimum size. And this is just what inputs have. They have an intrinsic minimum size where they're, you know, they're not going to shrink smaller than that because that's how the web was built from the really old days. And it's sort of, you know, you're almost treating this like it's a single element or word or whatever you want. This is the content itself and especially because it's a replaced element, it's kind or is it a replaced element? Sort of is whatever. It's a self-closing. There's no content inside of this anyway, right? It's the element is the element. Whereas most elements, you actually put content in there. So the browser has to render something to appear in the space that has to sort of have a defined size for it to work. And because of that, Flexbox treats that as the intrinsic minimum size and sadly, that means it will overflow. So maybe one potential solution is instead of, you know, just blanket stating this is one of those things where you run into these situations, use it where you need to. So you could say form star and then it's only going to do it in these, you know, in my form. And then my form works the way I wanted it to, except then we still get this, which is kind of awkward, right? Maybe you're even just saying this is on your inputs and your text areas too, right? Text area. So that way the, these can stay the right size and those won't shrink down, but then the elements that you want can actually shrink down. And we just be a little bit more targeted with how we're doing it. Instead of blanket stating it everywhere, I think then you, you know, it fixes things. Maybe this is something you throw into your reset instead, because it gets the behavior that you want it to, where it's targeting those problematic things. It's a little bit like we often have in our resets, we do like image and SVG and your video and your picture. And we, you know, select things that sometimes overflow. And we just do a max with 100% on there. And there's no problem with that. We're targeting, not targeting everything, because when we target everything, there's sometimes unintended consequences. But when we find areas where we are running into issues and there's these weird problems that crop up that seem weird and they are kind of weird for sure. But I wouldn't say it's CSS's fault that these happen. It makes sense why CSS is doing it the way it does, but we run into these sort of strange things. So you could target those and, you know, potentially fix those specific things instead of blanket stating things. Just because usually when that happens, we end up running into some weird things. And we have to do stuff like this because again, we're working with a legacy. The web is like the legacy of all these old things that we're sort of adding these new, better things on top of but we need to make those work with the old things the way they've always worked because if we change how those other things work, then it just introduces potential problems and then if we tried to change it now, it would introduce even more problems because so many people have worked with how they work now that it becomes definitely a little bit messy, a little bit frustrating. But that's why I think really understanding why they work the way they do and then sort of, okay, in this situation, this is the solution I'm going to have. It sucks that we have to remember that, but that's the same for basically anything we do in life, I think, is learning how something works and then learning about the exceptions and the other parts of it and just the more you do it, the better you get at it, the more you know about these little issues that come up, the easier it is to find the issues that come up and find ways of fixing them. So whether or not I change your mind, I really don't care if you want to do this and it works for you, it's totally up to you, right, throw it around if you want. I just wanted to show that it has potential side effects and more importantly, I wanted to look at why it works the way it does and sort of the benefits of the default behavior and why I think it does what it does and I think it works well most of the time, though we just, we do run into these weird little things along the way as well. So I hope you enjoyed this video, it was a little bit into the weeds, a little bit on plan, I wanted to get it out there because I've had so many questions about it. Yeah, I hope you enjoyed it and with that, I'd like to thank my enablers of awesome, 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.