This is Why CSS is so Frustrating! 😭 

Agreed!

Yup, it's a blessing and a curse at the same time.

True that!

espcially when you're using padding instead of height which logically would make more sense. LOL this dude filling everyone with misinformation

So it's not only me 😂

I agree!

Kevin Powell

@@heracraft5526 if there is a master, it's Kevin!

Of course there's people at that level

I'm a CSS master. Only took ten years.

Glad I could help!

Same 😂

ChatGPT it next time

deadass 😂

I knew some would disagree. I know how it works and show you need to apply a height. However, it feels illogical to require explicitly applying an arbitrary height value I won't use after I have implicitly said I want a height with flex-grow. It would be nice if flex-grow in a column context applied this meaningless value automatically. Some will agree and some won't.

​@@DaveGrayTeachesCodeWouldn't "flex-base: 0" also solve the problem and be less confusing? I mean it's still kind of weird, but at least looks more coherent.

@DaveGrayTeachesCode I can see how it could be confusing at first. However, after a short deep dive into flex boxes and how it adapts the layout works from the flex basis, it is no longer confusing and makes all the sense in my opinion.

@@DaveGrayTeachesCodeit’s not a meaningless value though because the presence of a height property or not, has a meaningful effect on how the element is rendered. The moment you take the css specs implementation into account, is the moment the behaviour becomes intuitive.

I don‘t find that illogical at all.

Thanks for sharing!

Glad it helped!

I knew some would disagree. It is an opinion. That said, it feels illogical because the height responds as we want it to when we implicitly say we want a height with flex grow. It is strange to then have to explicitly set an arbitrary height value that we will not use.

​@@DaveGrayTeachesCode So what is the point of your video if anyone has their own opinion?

@@millos0116 You can't deny everyone has their own opinion. I have two points in making this video - empathy for many who have asked me about this or similar situations with flexbox and I believe flexbox in a column context should implicitly apply the height value that it will override anyway.

You're making an incorrect assumption. I do get it and even show in the video a height must be applied. This is about why it can be frustrating as the title clearly states. It is an opinion, and some will disagree. I do feel like it is illogical to require an explicit arbitrary height value that will not be used when I have implicitly said I want a height with flex-grow. I wish flex-grow in a column context already applied a height.

That's right. I was explaining why it is frustrating and feels illogical. It just seems illogical to need to provide an explicit height that will not be used when I have already implicitly applied height with flex grow. Confusing and frustrating for many. Of course some will disagree.

Initially your height was set to auto. Then you set it to an explicit value. That's it. There's no reason to think flex-grow would influence the height property any more than influence the color property.

The better question is, why does setting flex-grow take up any more room at all. What property is giving its parent all that extra height? I don't know tailwind so I can piece it together from your code

⁠@@detoreit’s just CSS behind. There is no explicit height anywhere on the y axis. Flex-grow will take as much as possible with its content, which is shown here with no text vs a lot of it. It behave the same way as normal. There is no solution that can magically know what height the dev expect without specifying one. Whether it’s grid or flex or anything, to get the same result will require a height of some sort.

@@DoUrden09 no, but I mean. When he hits flex grow with an empty text field, it still grows. So something in the parent hierarchy has to have something creating height outside of content related.

I knew some would disagree. I know how it works and show you need to apply a height. However, it feels illogical to require explicitly applying an arbitrary height value I won't use after I have implicitly said I want a height with flex-grow. It would be nice if flex-grow in a column context applied this meaningless value automatically. Some will agree and some won't.

I do recommend learning CSS before using any class library like Tailwind.

It makes sense if you already know the rule. I show why some get frustrated with this. It seems illogical to require an explicit arbitrary height value that will not be used when you already implicitly state you want a height with flex-grow in a column context. It would be nice if, in the column context, flex-grow already applied this meaningless height value.

It's an opinion so you may not think it is illogical and yet I still can. It's a hypothetical situation that I displayed in video format. I show the fix by applying a height. However, to me it does feel illogical to require an explicit arbitrary height value that will be overridden anyway. In the column context, it would be nice if flex grow would implicitly apply this meaningless height value.

Glad it helped!

No, I'm saying in a column context, flex-grow should imply the meaningless height value that it will override anyway. I can apply a height of 1px to solve the issue I show, and that value is meaningless.

"if the earth is round, the stock exchange is up, and the mailman delivers my mail today... My element will follow default sizing behaviour unless I specify non default sizing rules".... 😂😂😂

It is an opinion, and some will disagree. Some are also making assumptions that I don't know how it works when I already show a height must be assigned. This is about why CSS can be frustrating and not everyone will agree. I do feel like it is illogical to require an explicit arbitrary height value that will not be used when I have implicitly said I want a height with flex-grow. I wish flex-grow in a column context already applied a height.

Glad I could help!

It's an opinion and I knew some would disagree. That said, I show the order of events that makes it feel illogical and why it can be frustrating. I feel like we should not be required to apply an explicit arbitrary height value that will not be used when we are already implicitly saying we want a height with flex-grow in a column context. In the column context, it would be nice if flex-grow implicitly applied this meaningless height value.

Glad you liked it!

Hmm, in the video I show I used flex-grow. The fix that I also show is to use a height value. Not trying to solve a problem here - just showing why it can be frustrating.

It's an opinion and opinions do vary. To answer your question.. I show the path that leads to confusion as some think they have applied a height and visually it seems as if you have. It feels illogical to apply an explicit arbitrary height value that won't be used because flex-grow overrides it anyway. In a column context, it would be nice if flex-grow implicitly applied this meaningless height value.

Glad it was helpful!

You're welcome!

I'd rather not show the scrollbars until necessary. Really the only difference between auto or not.

No that really has nothing to do with it. Tailwind just applies predefined CSS classes.

I'm glad some of my videos helped you. I do know CSS and actually created this video with empathy as if I was new to CSS. I show the path to frustration and why some get there. Of course, it is just one of many paths to frustration lol. Finding it illogical is an opinion and they can differ. I do find it illogical to require an explicit arbitrary height value that flex-grow will override anyway. In the column context, I think it would be more logical for flex-grow to implicitly apply the underlying arbitrary height value. The visual feedback it gives implies that it does, but it doesn't - which causes confusion and frustration.

This is not a tailwind issue. I can show this same problem by applying CSS in the same order. In fact, that is what tailwind does. It just applies CSS based on predefined classes. So if I did not apply a height value first using standard CSS, I would have the same issue. I did this specifically in this order to show why CSS can be frustrating. I also show the solution which is simply to apply a height value whether you're using tailwind or CSS.

It is an opinion. I do understand how CSS works. Maybe Google my name along with CSS. That doesn't mean I can't be frustrated by it or wish something worked a differently. Read some other comments for my thoughts. And there's nothing wrong with tailwind. It's simply another tool. You will get further in life without being condescending though.

@@DaveGrayTeachesCode I certainly didn’t mean to insinuate that you didn’t understand CSS, my comment was an alternative to others looking for advice that share the current school of thought which is that TW will solve everyone’s problem. IMHO TW doesn’t solve any other problem that simply understanding CSS would. I personally see zero advantages to TW outside of creating faster but it doesn’t help people understand what is happening. It also disastrously affects legibility in semantic markup. I would argue as much but I’m certainly not naive enough to think I know everything either. No condescending marks were made.

@@ZacharyPrice gotcha. I took it directed at me. Sometimes I read too many RU-vid comments in a day lol. There are nice ones but they can also bring you down. I agree that everyone should learn CSS first. Tailwind fold is a nice extension for hiding all of the classes. A couple of benefits in my opinion are a nicely defined class naming system that is easy to learn and tailwind only ships the code you are using. Lots of old bloated CSS files out there that haven't been cleaned. Thanks for your reply.

I agree that everyone should learn CSS first. No mistake here though. I show a problem AND the solution while showing empathy for many who have asked me about this. I also highlighted a part of CSS flex-grow that I disagree with. In a column context, I think flex-grow should imply the meaningless height value that it will override anyway.

I can relate!

Yeah not everyone likes tailwind but many do.

Exactly what I did in the video as well.

Actually, no. I show you need to set a height value. This video is about why CSS can be frustrating. In my opinion, it does feel illogical to require an explicit arbitrary height value when I am already implicitly saying I want height by applying flex grow in a flex column context. In this context, I wish flex grow would already apply this meaningless height value.

😆 You're welcome!

Opinions vary, but there's nothing wrong with Tailwind. As you said, it just applies classes. And by reading what classes are used when it compiles, it keeps CSS bloat down.

@@DaveGrayTeachesCode Meh, its adding a class for each small style, its almost as adding inline styling, making any code look ugly and messy

@@Tijdperkzuid you can use TailwindFold to hide the classes if you want. CSS applies classes in the same way, but to each their own.

That's a hardline opinion. Learning things can be frustrating. I made this video with empathy for many who can feel the frustration. Nothing wrong with being frustrated from time to time or wishing something worked differently. And I do understand how CSS works. That said, for this specific example, I really believe flex-grow in a column context should imply the height value that it ends up overriding anyway.

Sounds like we both do understand it. I just disagree with how CSS handles it.

I get the sarcasm, but I show the path that leads to the confusion and others say it helped. While I show adding a height fixes the problem, it does feel illogical to add an explicit arbitrary height value that won't be used. I think flex-grow in a column context should implicitly add this meaningless height value.

@@DaveGrayTeachesCode You're good dude, turns out I was just hangry. I have an issue with the whole front end paradigm right now. Most of it is way more complicated than it has any right to be, theres a long list illogical things like this that can be avoided by simply NOT using these type of frameworks. Might just be me.

The more you use it, the easier it will get. But at times it can still be very frustrating!

Agreed!

It can be frustrating, but don't give up!

You're welcome!

No, I know how it works. I even show what to do in the video to fix the issue. Doesn't mean I don't have empathy for those that it frustrates. And I do think in a column context, flex-grow should imply the meaningless height value that it will override anyway.

Yes, units are another frustrating part for sure. I knew there would be some disagreement on this one. To me, it feels illogical to require an explicit arbitrary height value that I won't use. By setting flex-grow, I am implicitly saying I want a height already. Opinions vary as the comments indicate.

@@DaveGrayTeachesCode I guess it depends on the context. Grow could mean keep growing while you have room, which in the vertical on a page means no real limit. In which case, you probably want a "max height" to keep it in check. I certainly don't know anywhere near what you know about CSS, but I have run into some odd requirements on a couple of projects, and I was really scratching my head until I found a forum post discussing the quirks of certain layouts, and finally understood what was going haywire. Troubleshooting CSS for others, I have found that sometimes order of files and being more specific can create oddities. Always load your site wide CSS first, then any general overrides, and finally any overrides specific to the page.

@@javabeanz8549 I agree! And I don't necessarily know more than you. In the context of this video, I would like it if flex-grow implicitly applied a height value so I did not have to explicitly provide a meaningless one. CSS does have many quirks.

Yes, you need to apply a height. However, it feels illogical to require an explicit arbitrary height value I won't use after I have implicitly said I want a height with flex-grow. It would be nice if flex-grow in a column context applied this meaningless value automatically.

You have to give it a height to overflow. However, the height value is overridden by flex-grow in a column context.

Kevin is the CSS GOAT 🙌. That said, there is nothing extra to demystify here. You must set an explicit height to have an overflow. However the point is, it feels illogical. We already implicitly express we want a height when we set flex grow. And it responds accordingly until we want an overflow.

Except that it visually shows it will work this way and then doesn't in the end - which is what I was trying to convey here. Of course, all opinions and we won't all agree. My reply to others who have said it is logical - in the flex column context, it would be nice if the overridden height value was just implicitly applied because it won't be used anyway.

I cover responsive design in my CSS course on my channel.

@@DaveGrayTeachesCode Thank you very much. I might as well go for your HTML course also and combine them together for better understanding and improvement

Lots of CSS quirks for sure 🙌

Or you could say with empathy for those that have asked me questions like this lol.

@@DaveGrayTeachesCode wasn't meant to upset you. That's how we talk in my community. Hyper criticism means 💕💕

I don't know if it feels illogical to everybody else. You can see varying discussions on it here in the comments.

It is an opinion, and some will disagree. Some are also making assumptions that I don't know how it works when I already show a height must be assigned. This is about why CSS can be frustrating and not everyone will agree. I do feel like it is illogical to require an explicit arbitrary height value that will not be used when I have implicitly said I want a height with flex-grow. I wish flex-grow in a column context already applied a height.

I knew some would disagree. I know how it works and show you need to apply a height. However, it feels illogical to require explicitly applying an arbitrary height value I won't use after I have implicitly said I want a height with flex-grow. It would be nice if flex-grow in a column context applied this meaningless value automatically. Some will agree and some won't.

It would be nice, I agree. After working with css for 20 years it becomes a habit so it doesn't bother me as much :)

Never said you needed Tailwind. I just happened to be using it in this example. Why is it strange? Opinions vary, but I've been asked this one many times. If you don't know to apply the height value first - which will be overriden by flex-grow anyway in this column context - you will have what you see here. At first, CSS applies the flex-grow and the chat window takes up the available space. Visually, it does what you want. And then you add overflow and it blows up. You need that meaningless arbitrary height value for overflow to work. Doesn't matter what the height value is because flex-grow overrides it. In the column context, flex-grow should just imply this value.

@@DaveGrayTeachesCode I think what you were actually trying to achieve for your chat container element is height 100vh, you don't need flex-grow at all.

Yeah there are a few notes to remember lol

I really like it too

😆 That's a new one!