This is Why CSS is so Frustrating! 😭

No video

This is Why CSS is so Frustrating! 😭

Рет қаралды 219,718

Күн бұрын

CSS has many quirks, and this is just one example that seems illogical. After we get the height of the window we want with flex-grow, we shouldn't have to set another arbitrary height value... but we do because we can't overflow the window if we haven't set a height. And then flex-grow overrides the set height and fills up the window. It's definitely not straightforward.
💖 Support me on Patreon ➜ / davegray
💻 Web Dev Roadmap for Beginners (Free!): bit.ly/DaveGra...
🚀 Discord ➜ / discord
👇 Follow Me On Social Media:
GitHub: github.com/git...
X: / yesdavidgray
LinkedIn: / davidagray
Blog: www.davegray.c...

Пікірлер: 358

@MrHellmager 4 ай бұрын

Css heights somehow are one the of the easiest and most frustrating properties.

@DaveGrayTeachesCode 4 ай бұрын

Agreed!

@saiphaneeshk.h.5482 4 ай бұрын

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

@manjunatha5a 4 ай бұрын

True that!

@gm42069 3 ай бұрын

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

@jamsheed5179 3 ай бұрын

So it's not only me 😂

@younes-47 4 ай бұрын

The thing about css is that nobody is considered master in css 😂

@DaveGrayTeachesCode 4 ай бұрын

I agree!

@heracraft5526 4 ай бұрын

Kevin Powell

@DaveGrayTeachesCode 4 ай бұрын

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

@zenatimohammedel-amine6646 4 ай бұрын

Of course there's people at that level

@user-il9qo4qc4n 4 ай бұрын

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

@user-lq7gv8qp6m 4 ай бұрын

Perfect timing... I've had problem with this on project I'm currently working on for 2 days now and you just solved it. Big thanks!!!

@DaveGrayTeachesCode 4 ай бұрын

Glad I could help!

@ahmedivy 4 ай бұрын

Same 😂

@malikau917 4 ай бұрын

ChatGPT it next time

@EdwardWongHauPepeluTivruskyIV. 3 ай бұрын

deadass 😂

@cyrilgorrieri 4 ай бұрын

That's because of the way flex works. It starts with the size of the content and then changes the size based on the rules. In that case the text was huge so it started with a huge box, and nothing to grow. When the height is set, the layout starts with a 4px block and then grows it. There are plenty well explained resources on flexbox.

@DaveGrayTeachesCode 4 ай бұрын

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.

@derbaum314 4 ай бұрын

@@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.

@cyrilgorrieri 4 ай бұрын

@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.

@dabbopabblo 4 ай бұрын

@@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.

@callmepotato192 4 ай бұрын

I don‘t find that illogical at all.

@tanveermughal3935 4 ай бұрын

I used to do it with flex box but now i use grid where i need to have scrollbar. Rule of thumb is to give a fixed or 1fr width/height to row/column on which you want scroll. Add overlow-hidden on parent (container with grid class) and overflow-auto on scrollable container. Every container will take its own width and height.

@DaveGrayTeachesCode 4 ай бұрын

Thanks for sharing!

@kruseverve 4 ай бұрын

I just was dealing with this same issue! Btw that was a smooth af transition

@quinson93 4 ай бұрын

Weirdly enough, I was trying to figure this out just two days ago for a project. Looks like my agent has my back!

@DaveGrayTeachesCode 4 ай бұрын

Glad it helped!

@TheItamarp 4 ай бұрын

Its only frustrating and illogical if you don't bother understanding the rules. For the most part, unless you define otherwise, the way CSS works assumes that it can grow as much as it needs to in the vertical direction to contain the content. For overflow to have any effect, the element's height needs to be constrained to a size smaller than the content. So, unless you tell it something else (by setting a fixed height for example) flex-grow will, well *grow*...

@zenatimohammedel-amine6646 4 ай бұрын

Actually I find it more logical this way because if you give it a flexible height than it doesn't have a real height so there Is no way for the browser to know at which point an overflow will apply, with a fixed height it works totally fine

@DaveGrayTeachesCode 4 ай бұрын

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.

@millos0116 2 ай бұрын

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

@DaveGrayTeachesCode 2 ай бұрын

@@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.

@DoUrden09 4 ай бұрын

Because you don’t get it doesn’t mean it defies logic. It literally is logic behind the scene. You want something impossible and expect it to be. You can’t have something overflow if it has no idea how tall it is to begin with. You tell him first to grow dynamically has much as possible, which it does, and then you expect it to magically know that you want it to be static and not dynamic. It can’t know how to place a scroll bar if you just said you want it to grow as big as possible. Hence why that work once you assign an actual height. It can’t just automagically know everything the programmer wants on a given axis that can theoretically be infinite.

@DaveGrayTeachesCode 4 ай бұрын

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.

@user-zq4lo2cb2t 4 ай бұрын

Because page can theoretically grow in height infinitely, you must specify the height when you dealing with limited height with scrollbar.

@DaveGrayTeachesCode 4 ай бұрын

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.

@detore 4 ай бұрын

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.

@detore 4 ай бұрын

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

@DoUrden09 4 ай бұрын

⁠@@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.

@detore 4 ай бұрын

@@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.

@henriqueomena7686 3 ай бұрын

Hey, from my point of view, this behavior makes sense because, by default, the height value is set to auto. So, it's normal for your ul to extend when you add more content. How will CSS know when you want a scroll to appear? The height, in this case, acts like a breakpoint for the scroll to know when it should appear.

@herzaislad 4 ай бұрын

That's pretty basic. Auto means if content is less than the container height, scrollbar won't show, but if content is more than container, the scrollbar will show. You have to set the height or maxheight of the container in order to show the scrollbar and limit the content height.

@DaveGrayTeachesCode 4 ай бұрын

@ramondewilde05 3 ай бұрын

Honestly it kind of makes sense Without a set height there is no way for the browser to know where to start the overflow even with flex grow it wont know where to start the grow so it just fits the text content instead which wouldn't have a scrollbar because nothing is overflowing

@pablogodoy6645 3 ай бұрын

The old and reliable controversy to make interactions, take mine! 😂. This kind of mindset it's not reconmended for an engineer. It's a dev's responsibility to know how to use their tools properly. Invent solutions, not problems.

@nustaniel 2 ай бұрын

Makes perfect sense to me. If you don't specify a height on the parent or the child, it will let the element grow to the content inside the element box. That's what HTML elements are supposed to do after all, and without direction, how does it know how big is too big? I don't think I see a max height on the container, so how would it know when to stop growing? Apply a max-height to it and it will stop growing at a specified height and apply the overflow-y: auto. Also using an unordered list for a chat window is an interesting choice 😀

@MartinBarker 4 ай бұрын

My biggest pet peve with people's idea of CSS now is the amount of classes you have on the elements instead of just one class and it setup correctly in CSS, at that point your not actually coding CSS, therefore not learning it.

@DaveGrayTeachesCode 4 ай бұрын

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

@zancrow_gaming 3 ай бұрын

It's really frustrating. Sometimes with no height, it works. Sometimes it doesn't Really annoying. I encountered this issue 2 days ago did it another way but I will try this, alot easier

@toggod3192 4 ай бұрын

It makes sense, though the computer doesn't know you gotta tell it every little detail

@DaveGrayTeachesCode 4 ай бұрын

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.

@SystemDesignNepal 4 ай бұрын

I don't think your situation is illogical but yes no doubt it's frustrating dealing with heights even with simple cards or section anything. Width can be dynamic but height we need to think alot. At your situation it's not illogical. Give it vh with calc or svh, dvh.

@DaveGrayTeachesCode 4 ай бұрын

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.

@Nellak2011 4 ай бұрын

You have to set a definite height obviously

@babblebey 4 ай бұрын

Great 😁... I'm working on side-by-side editor-preview markdown editor and I have this issue, I just found this randomly scrolling and it was a fix to the issue that's I've just left for weeks 🤤

@DaveGrayTeachesCode 4 ай бұрын

Glad it helped!

@_insanebuddy 3 ай бұрын

This is not wierd. As, by default, the height is set to 100% of the whole screen. And, on applying overflow-y-auto, it though applies but could not see the data flow out of the div as the div is growing around the height. So, overflow works when there is fixed size values applied to div that specifies the div to be restricted in size and data overflow is controlled with the overflow property.

@theodorenegusu418 3 ай бұрын

Bro you're saying. in a container were there is no limit. You told a div container to grow until something limits it. Then you add content to it and that content will never overflow because the parents and the grandparents don't have no height limits.

@DaveGrayTeachesCode 3 ай бұрын

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.

@NotJayUU 4 ай бұрын

What you've described is very logical and is entirely intended behaviour. Containers will grow with content unless otherwise specified. The first 2 properties have no impact on this rule. The height property does have impact. What you've said is on par with the statement: "if I set the alt text and the aspect ratio of an img element, it will grow to fill its container until I set the width property"... Like... yes? That's how it works

@NotJayUU 4 ай бұрын

"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".... 😂😂😂

@DaveGrayTeachesCode 4 ай бұрын

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.

@MrJeszam 4 ай бұрын

This is whats frustrate me.. thank you for the tricks.

@jsterling6376 4 ай бұрын

How does that defy logic? Overflow handles overflow.. can’t have overflow if you don’t have defined dimensions.

@DaveGrayTeachesCode 4 ай бұрын

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.

@danimusbar 4 ай бұрын

Tks Sir, its help me alot, It takes 1 week try to solved but nothing works, and You share this awesome, It really help me

@DaveGrayTeachesCode 4 ай бұрын

Glad I could help!

@abdoolkareem_ 3 ай бұрын

Perfect timing. This is the exact situation I'm in rn

@techlers8924 4 ай бұрын

The worst is if you add min-width/height and it suddenly does something even if it is 0

@dakoderii4221 4 ай бұрын

Excellent editing. The video flows back into itself.

@DaveGrayTeachesCode 4 ай бұрын

Glad you liked it!

@snivels Ай бұрын

I think you can accomplish the same with 'basis-full' and 'shrink-0' and 'grow-0' no?

@user-fe6zh2md3w 4 ай бұрын

What would you have expected to happen? Flex grow increases the height to the content. You need to define a view port. I think it's straight forward.

@DaveGrayTeachesCode 4 ай бұрын

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.

@evolutionxbox 4 ай бұрын

You need to use flex basis and flex grow properties.

@DaveGrayTeachesCode 4 ай бұрын

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.

@rlyehdate 2 ай бұрын

What I hate about css is its non intuitive logic. Doesn't matter how much time I pass doing it. A couple of weeks is enough for me re studying the thing. That does not happen with the programming languages: their logic and syntax makes them self explanatory, not the case for css.

@schatten105 3 ай бұрын

I See you talking about css but don't Show any css at all (yes i know what tailwind is, that's not the point)

@mulhamalamry 4 ай бұрын

Omg thanks i needed this for my blog!!

@DaveGrayTeachesCode 4 ай бұрын

Glad it was helpful!

@troooooper100 3 ай бұрын

there is also fit-content and etc but not not supported enough yet but holy it's all so annoying... i had an issue with position sticky... guess what certain properties like transform F@@ks it up because it creates a new layer which changes the view port. scrolling caused it to scroll with everything because new layer was part of that, it became sticky to that new layer ... honestly wtf.

@ashwanikumarsingh2509 4 ай бұрын

Thank you for the fix. I was really frustrated about the same.

@DaveGrayTeachesCode 4 ай бұрын

You're welcome!

@frovuks8523 3 ай бұрын

It does not defy logic, you just don’t understand it. Read some css documentation and how does flex work and maybe then you’ll figure it out

@factzfactory4956 4 ай бұрын

What if we use overflow-y-scroll ? I guess we dont have to define height

@DaveGrayTeachesCode 4 ай бұрын

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

@wirklich_niemand 3 ай бұрын

first mistake was the use of tailwind

@DaveGrayTeachesCode 3 ай бұрын

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

@gautampatoliya6872 3 ай бұрын

A big disagree button

@quanta_69 2 ай бұрын

"CSS has no beginning and no end. Learn all you need and go"

@user-vs9dk9bw3v 2 ай бұрын

completed reactJs but still cannot do css well

@muriloshimizu 4 ай бұрын

I would question the use of flex in that context to begin with. Besides, it is not illogical to have to set a height to get overflow on a flex col element that was allowed to grow in the first place. Btw, your videos of currying and functional programming in js helped me big time - I watched them many times to understand some concepts. You just need to learn css as if you were completely new to programming. Some css behaviours feel weird at a first glance, but they are not illogical.

@DaveGrayTeachesCode 4 ай бұрын

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.

@travelan 3 ай бұрын

This is 100% a Tailwind issue, not a CSS issue. Tons of ways to do this in CSS easy peasy.

@DaveGrayTeachesCode 3 ай бұрын

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.

@secretcommander2519 4 ай бұрын

Is this an extension that breaks line if the class is too long?

@deadlock107 4 ай бұрын

Nice trick! Didn't know about that.

@ZacharyPrice 3 ай бұрын

lol this isn’t frustrating at all… I’d recommend understanding why CSS works this way as opposed to putting your faith in TW.

@DaveGrayTeachesCode 3 ай бұрын

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.

@ZacharyPrice 3 ай бұрын

@@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.

@DaveGrayTeachesCode 3 ай бұрын

@@ZacharyPrice gotcha. I took it directed at me. Sometimes I read too many KZfaq 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.

@theophiled 3 ай бұрын

The mistake is to use tailwind for everything instead of learning css fundamentals

@DaveGrayTeachesCode 3 ай бұрын

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.

@HampusAhlgren 4 ай бұрын

God that tailwind code is so messy 🤮

@DaveGrayTeachesCode 4 ай бұрын

Yeah not everyone likes tailwind but many do.

@InarusLynx 4 ай бұрын

Was working on my front-end for my full stack project. Css is easily the most frustrating part of everything. I'd knock out the front end getting data from the back easy and then spend forever figuring out what's wrong with displaying everything.

@DaveGrayTeachesCode 4 ай бұрын

I can relate!

@imheretosleep 4 ай бұрын

I always encounter this and most of the time I add a height property in the parent element

@DaveGrayTeachesCode 4 ай бұрын

Exactly what I did in the video as well.

@CristianKirk 4 ай бұрын

100% skill issue.

@DaveGrayTeachesCode 4 ай бұрын

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.

@pyromagne2280 4 ай бұрын

What? This is literally my problem yesterday, every time I have a css problem I accidentally getting the answer with your shorts, this happened twice now, well thank you I guest? 😂

@DaveGrayTeachesCode 4 ай бұрын

😆 You're welcome!

@dekuplaysguitar3313 3 ай бұрын

Most of the times I use max height property with overflows

@shaikhyamin3464 3 ай бұрын

If css is frustrating then you are not getting how css works !!

@DaveGrayTeachesCode 3 ай бұрын

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.

@Tijdperkzuid 3 ай бұрын

Tailwind sucks, its basically inline styling, but in the class tag instead of style tag

@DaveGrayTeachesCode 3 ай бұрын

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.

@Tijdperkzuid 3 ай бұрын

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

@DaveGrayTeachesCode 3 ай бұрын

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

@calebprenger3928 3 ай бұрын

Here is tour mistake......you are using tailwind

@layerok315 3 ай бұрын

The same applies to the horizontal scroll container. You need to set the minimum width to the container to fix this. I also couldn't understand this, so I agree with the author, but it is too late to fix flex

@DaveGrayTeachesCode 3 ай бұрын

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

2 ай бұрын

All frameworks are frustrating, pure CSS is a pleasure.

@JackBauerDev 4 ай бұрын

I could never do frontend work

@dustingunter9163 4 ай бұрын

You mean you need to tell a block level element how tall it is so it knows when to start scrolling? weird

@DaveGrayTeachesCode 4 ай бұрын

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.

@dustingunter9163 4 ай бұрын

@@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.

@mukiibipeter07 Ай бұрын

I use flex for that. Works perfectly.

@AaronLyNxAI 4 ай бұрын

Can confirm. Making a layout for a HTML clicker game can take a while when the only coding lessons you've had are bits and pieces you pick up now and again. It's going well however, even with the setbacks due to css.

@DaveGrayTeachesCode 4 ай бұрын

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

@falcodxb 3 ай бұрын

Saul Goodman escapes prison, grows his hair out, and lives the rest of his life out as a web developer.

@TheSergy12 4 ай бұрын

For flex i always set min-width:0 to all > *. Same for height if its flex column

@oncetwice6366 4 ай бұрын

Can't you add max height?

@TheScriptPunk 3 ай бұрын

People should stop avoiding css. Learn a11y and 508 compliance with site elements. Learn what css can do, and build. It's not hard, people just dont like typing that weird frankenjson syntax and have some affinity to tailwind or bootstrap when they have no idea how their frameworks operate or what the internals are even doing in their projects.

@lordpain007 3 ай бұрын

as a backend dev ...i have cry in rhe bathroom to code the mess of css :( .. dosnt matter which framework or theme i used end of the its css

@enestastan7147 4 ай бұрын

I think it is one of the main design logic of html. A page is limited in width but can grow indefinitely in height. What is frustrating is that you need to find a value(s) for height to support responsive design. Its not as simple as percentages in the case of width.

@DaveGrayTeachesCode 4 ай бұрын

Agreed!

@MubashirullahD 4 ай бұрын

CSS is the reason I gave up on web development as an option. What a mistake. Came back to it and I manage

@DaveGrayTeachesCode 4 ай бұрын

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

@alilawati87 4 ай бұрын

I wasted hours and hours trying to figure out why the scroll bar does not appear!!Thanks

@DaveGrayTeachesCode 4 ай бұрын

You're welcome!

@JawsoneJason 3 ай бұрын

It defies logic when you dont understand how flexbox works 🙄 Studying CSS helps

@DaveGrayTeachesCode 3 ай бұрын

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.

@fahimcasual 4 ай бұрын

"It defies logic" and that is exactly why AI won't replace coders

@javabeanz8549 4 ай бұрын

That seems more like a feature to me. The frustrating part about CSS to me, is when you can't use certain units for these heights or widths. The FR has been a great help with some of these things, especially when you have to fight with percentages.

@DaveGrayTeachesCode 4 ай бұрын

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.

@javabeanz8549 4 ай бұрын

@@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.

@DaveGrayTeachesCode 4 ай бұрын

@@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.

@k-yo 4 ай бұрын

Min-width: 0. Flex containers by default must have the content space as a minimum, so you tell it that it can ignore that.

@DaveGrayTeachesCode 4 ай бұрын

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

@user-ru8hn9hb5c 4 ай бұрын

I always add the height to the element, not the container. I've never had this happen to me. I am using grid very frequently, which allows me to control all elements from just the container if that makes sense.

@DaveGrayTeachesCode 4 ай бұрын

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.

@Life4YourGames 4 ай бұрын

That's just like you can't animate on auto-values.

@abbassiziad1379 4 ай бұрын

Css is an old school solution. Modern dev needs something else. Maybe something like flutter.

@nguyenbalongvu9434 4 ай бұрын

damn all the time I need to set height to calc, you solved my problem

@911Salvage 2 ай бұрын

I sure am glad I'm not a Web dev.

@bunnyboy7008 4 ай бұрын

My guess: Adding h of any value - value not greater than desired max size - works because max-height prop must be set to fit-content. I am assuming height's default valur is set to auto befote overriding. Also, I am assuming Tailwind comes with some predefined CSS resets or normalize. @KevinPowell might be able to demystify this sorcery better.

@DaveGrayTeachesCode 4 ай бұрын

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.

@griffin955 2 ай бұрын

Well yeah, of course the container would need it's height defined. it's not illogical that the container keeps growing to fit all of the text unless you specify a height. How else is it going to know?

@DaveGrayTeachesCode 2 ай бұрын

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.

@CamaguNcoso 2 ай бұрын

I created a project with HTML and CSS...when I viewed the project on my Smartphone, the page was too big. Does Dave Gray also have a course on that?

@DaveGrayTeachesCode 2 ай бұрын

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

@CamaguNcoso 2 ай бұрын

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

@edwarddejong8025 4 ай бұрын

CSS is a terrible layout description system. Not easily programmable. I built my own dynamic framework that solves 99% of the predictability problems, but even with a multi-year effort, i still bump into weird rendering issues in browsers.

@DaveGrayTeachesCode 4 ай бұрын

Lots of CSS quirks for sure 🙌

@picklenickil 3 ай бұрын

The way you wrote css ..was... God bless my soul, blasphemic in the first place

@DaveGrayTeachesCode 3 ай бұрын

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

@picklenickil 3 ай бұрын

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

@juma2808 4 ай бұрын

worries me, because I don’t use CSS too often and it this feels logical, I must be using it wrong if it’s illogical to everybody else 😂

@DaveGrayTeachesCode 3 ай бұрын

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

@MrZerosixZeroone 13 күн бұрын

css is not frustrating, your skills are

@Rajib317 4 ай бұрын

Why defies logic? How will the computer know where to start the overflow? If your answer is screen height -100px then think about it. Height needs to be customisable.

@DaveGrayTeachesCode 4 ай бұрын

@NiNgem-bb6lc 3 ай бұрын

Hahahah I know this one, only because I had a problem triggering the onscroll event. Even though my body had a scroll the event wasn't triggering. Drop a height and voila.

@ribalcouri9525 4 ай бұрын

It's not that confusing if you consider that by default elements have 0 height, and the height changes dynamically, based on the content. This means a height needs to be declared so min-height, max-height, overflow-y, etc can be calculated based on that height. We don't regularly encounter the same issue with width because the majority of elements are block elements, and width is 100% by default, so there is something to calculate from in those cases.

@DaveGrayTeachesCode 4 ай бұрын

@ribalcouri9525 4 ай бұрын

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 :)

@marcodelpercio 3 ай бұрын

Why is it strange? You don't even need tailwind for this. Overflow-y implies you declare the max size of y a.k.a. max height of your content, after which the overflow handles it. That's normal

@DaveGrayTeachesCode 3 ай бұрын

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.

@marcodelpercio 3 ай бұрын

@@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.