This is Why CSS is so Frustrating! 😭

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

[@MrHellmager]

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

[@DaveGrayTeachesCode]

Agreed!

[@saiphaneeshk.h.5482]

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

[@manjunatha5a]

True that!

[@gm42069]

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

[@jamsheed5179]

So it's not only me 😂

[@ramondewilde05]

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

[@Ruin-kf4wl]

NO WAY, ive always thought that i would have no manually set the heights for ALL the breakpoints! I cant believe that this is the first time that im hearing about this

[@nustaniel]

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 😀

[@DoUrden09]

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]

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.

[@Nellak2011]

You have to set a definite height obviously

[@evolutionxbox]

You need to use flex basis and flex grow properties.

[@DaveGrayTeachesCode]

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.

[@rafaelbarbosa3030]

thank you dawg keep the good content 💯💯💯

[@babblebey]

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]

Glad it helped!

[@SystemDesignNepal]

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]

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.

[@_insanebuddy]

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.

[@noobweaver]

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]

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.

[@rlyehdate]

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.

[@Tijdperkzuid]

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

[@DaveGrayTeachesCode]

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]

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

[@DaveGrayTeachesCode]

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

[@HampusAhlgren]

God that tailwind code is so messy 🤮

[@DaveGrayTeachesCode]

Yeah not everyone likes tailwind but many do.

[@AaronLyNxAI]

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]

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

[@lordpain007]

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

[@dakoderii4221]

Excellent editing. The video flows back into itself.

[@DaveGrayTeachesCode]

Glad you liked it!

[@deadlock107]

Nice trick! Didn't know about that.

[@pyromagne2280]

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]

😆 You're welcome!

[@layerok315]

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]

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

[@yeetmcgee8734]

CSS makes me want to only do backend development

[@AlexanderBelov-y8o]

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]

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.

[@TheSergy12]

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

[@Life4YourGames]

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

[@parlor3115]

I guess they could have made it so that the height is automatically the remaining height until the end of the browser window, but it is nonetheless a sensible behaviour imho.

[@JawsoneJason]

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

[@DaveGrayTeachesCode]

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.

All frameworks are frustrating, pure CSS is a pleasure.

[@NiNgem-bb6lc]

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.

[@alilawati87]

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

[@DaveGrayTeachesCode]

You're welcome!

[@CristianKirk]

100% skill issue.

[@DaveGrayTeachesCode]

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.

[@joshuagalit6936]

Set the min height and height and then overflow y auto

[@TheScriptPunk]

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.

[@911Salvage]

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

[@zettadam]

Having to add height (or flex) is the most logical thing... nothing should be frustrating about that.

[@DaveGrayTeachesCode]

I figured there would be some disagreement here. I feel like I already inferred I wanted height by adding flex-grow. It seems illogical to need to go back and add an explicit arbitrary height value.

[@renemonroy214]

There’s nothing magical there, it’s just temporal ignorance of a part of the specifications. Everything has a why.

[@HikaruAkitsuki]

Web design from scratch is the whole thing is frustrating.

[@DaveGrayTeachesCode]

It can be but I love the challenge!

[@mohamedalkhyat3284]

Not frustrating but the language needs to know the height that should start apply auto scroll at

[@DaveGrayTeachesCode]

Frustrating is a feeling or opinion so it varies by person. I do apply a height to show the fix. That said, it feels illogical to require an explicit arbitrary height value that won't be used. It would be nice if flex grow in the column context implicitly applied this meaningless height value that it will override anyway.

[@0xtz_]

now I know why it's never working 😢 u saved me

[@DaveGrayTeachesCode]

Glad I could help!

[@philipm1896]

Javascript, css, and php are the most popular, proving humans are mostly idiotic and its too late now because people tried to make them better later on and with tooling and now we are in to deep to back out now and keep patching or create new tooling to overcome the stupid.

[@erikjunior3643]

i wish i could understand that

[@marcodelpercio]

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]

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]

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

[@danielkoudela1747]

Bro talks like AI.

[@DaveGrayTeachesCode]

Not even close

[@danielkoudela1747]

@@DaveGrayTeachesCode That's what AI whould said.

[@mohammadmira1626]

that is why i am not a frontend dev

[@DaveGrayTeachesCode]

The struggle is real!

[@S-we2gp]

html/css/javascript is the biggest pile of garbage on earth. We honestly just need to try again lmao. We're at a local minima we're stuck on the ss sunk bias and none of you will jump off

[@arxci9402]

Just use grid...

[@tacticalassaultanteater9678]

Use flex: 1 1 auto

[@guseynismayylov1945]

tailwind looks so shitty

[@DaveGrayTeachesCode]

It's just CSS classes. You can use the Tailwind Fold extension to hide them when you don't need to see them.

[@guseynismayylov1945]

@@DaveGrayTeachesCode No, it's not just css classes, because it precompiles everything. It's so insane to me that people forgot that there are some decent libraries that allow you to not use css classes at all, and allowing to achieve consistent design.

[@DaveGrayTeachesCode]

@@guseynismayylov1945 I know it compiles. We can nitpick, but essentially, I am applying a class in tailwind that applies a CSS style. It's also customizable if needed. I know some don't like it. Many do. YMMV

[@anandv1391]

Css is fun dave

[@amansarma417]

So true

[@henriquematias1986]

terrible i want to be as distant from CSS as possible : D

[@DaveGrayTeachesCode]

Backend development it is!

[@frostydog860]

🤯

[@whalecoding]

Font ide ?

[@younes-47]

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

[@DaveGrayTeachesCode]

I agree!

[@heracraft5526]

Kevin Powell

[@DaveGrayTeachesCode]

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

[@zenatimohammedel-amine6646]

Of course there's people at that level

[@user-il9qo4qc4n]

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

[@cyrilgorrieri]

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]

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]

​@@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]

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

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

I don‘t find that illogical at all.

[@boristenkes]

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]

Glad I could help!

[@ahmedivy]

Same 😂

[@malikau917]

ChatGPT it next time

[@EdwardWongHauPepeluTivruskyIV.]

deadass 😂

[@tanveermughal3935]

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]

Thanks for sharing!

[@kruseverve]

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

[@gautampatoliya6872]

A big disagree button

[@TheItamarp]

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

[@taragnor]

Honestly a lot of the rules are annoying and non-sensical. Certain properties get ignored in certain contexts for no discernable reason. Programming languages are logical, with CSS it just feels like a bunch of bureaucratic red tape you have to follow.

[@schatten105]

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)

[@ZacharyPrice]

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]

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]

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

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

[@pablogodoy6645]

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.

[@securefolder4548]

If you don't have the knowledge about how it works don't ruin it for others. There's no magical it's some basics css and flex stuff that you probably never learned 😂😂 lol

[@frovuks8523]

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

[@calebprenger3928]

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

[@quinson93]

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

[@DaveGrayTeachesCode]

Glad it helped!

[@SaintPepsiSanCoca]

Skill issue!! 😂

[@DaveGrayTeachesCode]

Such a weak reply. You can say that about anyone who is learning anything. However, I'm showing how someone can be frustrated, what the solution is, and why it doesn't seem to make sense. Setting an explicit arbitrary height value that is overridden by flex-grow anyway seems illogical. It would be better if in this column context, flex-grow implicitly applied a height.

[@정희-b3k]

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

[@DaveGrayTeachesCode]

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]

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]

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]

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

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

[@travelan]

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

[@DaveGrayTeachesCode]

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.

[@zenatimohammedel-amine6646]

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]

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]

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

[@DaveGrayTeachesCode]

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

[@jsterling6376]

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

[@DaveGrayTeachesCode]

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.

[@theodorenegusu418]

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]

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.

[@theophiled]

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

[@DaveGrayTeachesCode]

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.

[@rankarat]

lol using tailwind and complains, stop using it, its bad for understanding CSS;

[@DaveGrayTeachesCode]

I know both well. Not complaining. Empathizing. I show a common issue and how to solve it.

[@mjdev-i1p]

thats because you use tailwind and not css .. clearlyna skill issue

[@DaveGrayTeachesCode]

You made more than one incorrect assumption in your statement. Tailwind simply applies CSS classes and has nothing to do with it OR with a skill level. In addition, I do understand the issue and apply a height value during the video. The point was to share why CSS can be frustrating. I knew some would disagree because it is an opinion. In my opinion, it feels illogical to require an explicit arbitrary height value that won't be used when I implicitly already applied a height with flex-grow. I wish flex-grow in a column context automatically applied this meaningless arbitrary height value.

[@shaikhyamin3464]

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

[@DaveGrayTeachesCode]

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.

[@herzaislad]

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]

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.

[@henriqueomena7686]

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.

[@iznasen]

you are the weired part here. it needs a max-height

[@DaveGrayTeachesCode]

No, I'm just sharing an opinion, and showing one example of why CSS can be frustrating. As I show in the video, it is easily fixed by setting a height value.

[@picklenickil]

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

[@DaveGrayTeachesCode]

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

[@picklenickil]

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

[@dustingunter9163]

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

[@DaveGrayTeachesCode]

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]

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

[@MartinBarker]

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]

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

[@toggod3192]

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

[@DaveGrayTeachesCode]

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.

[@jr_omw]

flex grow + overflow auto I use it often and is literally the thing I found the weirdest about CSS, glad to have found this is not uncommon

[@casperon7]

If you really understand css, you understand the logic

[@zancrow_gaming]

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

[@Dylan_thebrand_slayer_Mulveiny]

It's not a flaw of css. It's a lack of knowledge of how css works. If you can't solve problems like this, then you shouldn't be charging people money.

[@DaveGrayTeachesCode]

Lots of errors in your comment. First, I created this video with empathy for the people who have asked me about it. I show you need a height value, so yes I know the solution. However I understand why it is frustrating for others. That said, you also say I'm charging people for content. I have not even created one premium course yet although I plan to. And yet even by your standards I'm not disqualified to do so because I do show the solution to this problem. So yeah KZbin comments like this are ugh.

[@troooooper100]

it's illogical in the same way as having a door with no door handle, yes you can open it but it defies logical expectations. There should be a simple way for devs to define what the behavior should be... fill the parent, fit the content, be percentage of parent, be fixed amount... honestly it's very unreasonable.. if it was upto me i'd do this %|min|max of eleID|parent|children|sibling height: min(children, 300px, 50%), max(#id.position.x), grow;

[@Dylan_thebrand_slayer_Mulveiny]

@@troooooper100 it boils down to the fact that css is driven by math. If you want 50% of something, you need to know what something is. If something doesn't have an explicit value, then you're essentially calculating 50% of nothing.

[@troooooper100]

@@Dylan_thebrand_slayer_Mulveiny everything has computed value

[@simionvlad9510]

So true, 90/100 of devs have no basics. They start already with frameworks but they have no idea what really happens.

[@GenericInternetter]

if height __then ____auto-adjust to height __else ____fk the dev

[@zgmg9263]

CSS is hard yes but you don't have a height on the container

[@snivels]

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

[@fahimcasual]

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

[@daniellittlewood8471]

"I should have scrollbars with all of this content, right?" No! What you want is actually not meaningful. You indicate that *if* the content is too big, *then* there should be scrollbars. But you never said what "too big" means! Without an explicit height, css would have to reach into your mind to know you "really wanted" the box to fill the viewport. That is not (and should not be) the default.

[@troooooper100]

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.

[@jeremyrichardgithuba5257]

Your voice sounds like the ai generated captions, I thought I was tripping

[@abbassiziad1379]

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

[@factzfactory4956]

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

[@DaveGrayTeachesCode]

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

[@falcodxb]

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

[@WWASHD]

Im not an expert cuz it kinda makes sense, your machine doesnt know resolution, so he just prints

[@sengchhunchhum2532]

Or you can just add basis-0 the element you want to be scrollable.