Is this a good idea?
Vložit
- čas přidán 1. 06. 2024
- After Adam Wathan, and then @t3dotgg both posted and talked about the min-width: 0 thing, I've been getting a lot of questions about what I think about it. Rather than just share my own opinion on it (which we will get into), I saw it as a fun opportunity to dive into how Flexbox works and why this can sometimes solve some strange issues, but also the new issues it can cause as well.
🔗 Links
✅ Adam’s tweet: / 1734696245015494711
✅ Theo’s video: [ • Oh no, I think I like ... ]( • Oh no, I think I like ... )
✅ Theo’s tweet: / 1753387896311259296
✅ Looking to up your CSS game? I’ve got free and paid courses 👉 kevinpowell.co/courses?...
⌚ Timestamps
00:00 - Introduction
01:48 - What started all this
02:48 - Why things don't always shrink
11:28 - Why this is a good behavior
19:17 - Being intentional with min-width: 0
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
Kevin today basically said "Y'all just using flex wrong" 😂
I haven't watched this video yet but im very happy to see you responding to this! I saw Theo's video and couldn't help but think its due to a lack of fundamental understanding why certain things behave the way they do. It also shines a spotlight on everyone that just mindlessly slaps "display: flex" on everything. Even the examples that the Tailwind devs give showcasing "min-width: 0" doesn't really help their case. I've never had a problem with any of my layouts that was solved with "min-width: 0", so to see all of this fuss was rather shocking
I feel personally attacked by your display: flex comment.
For real 😂😂 @@roymarshall_
Thanks for the deep dive. Sometimes there’s a good reason for why things are the way they are. Box-sizing: content-box notwithstanding.
yeah, they just made a mistake on the box-sizing thing. Could have gone either way, and they went the wrong way, lol.
@@KevinPowellyou could argue that they went the right way by not breaking the internet, right? `box-sizing` was a gift that let's us choose a different model, but the default behavior had to be content-box because that is how it worked before `box-sizing`. The shift from content-box to border-box really follows the internet's shift from focus on content to focus on form.
@@KevinPowell What irked me was that Internet Explorer got it right but everyone dunked on it because it was just the era to hate IE
@@solvedfyi Yeah it was the most logical and understandable implementation.
Plenty of other valid reasons to dunk on MS at the time but if we had followed them on this, countless wasted dev hours and ridiculous hacks would have been avoided
Theo really loves hot takes, he often needs to issue corrections
thanks Kevin, i appreciaate the depth you go into in order to explain the reasoms behind css behaviours, understanding the cause of something makes it a lot easier to solve problems when they occur.
I love that deep dive! Understanding how things work and the logic behind them is the best and the only way to become a good dev. Thx Kevin!
What a video omg. I'm studying CSS and mastering flexbox due to it's importance and this help me A LOT. Thank you so so much!
One of the best css deep-dive videos! Thank you.
I absolutely agree with you. It's not the best thing in the world, as it can change behaviors that you don't want to change. But when you do this for specific things that you want to change, that's the best of all worlds.
Mission accomplished Kevin. Learnt something new. Thanks 🙏
i love this kinds of videos, where i get to understand how something works from the core, even if i would need it once in a million years
Thank you for this deep dive video ❤
This was illuminating in so many ways 👏
Great job on this explanation, Kevin.
Oh yeah, I get it now. :)
Thanks for the deep dive, really awesome to have someone take the time to explain it in depth.
Well, I certainly learned a couple things! I use a ton of flexbox, I struggle with forms, and now I much better understand what is going on.
grid is better for nicer label / input layout.
@@UTube-nigga Agreed, generally.
Thank you very much.
At the first look min-width: 0; looks to be the magic solution.
Your explanation is really useful for a better understanding.
agreed, however with a slight difference: no min-witdh: 0; on inputs/selctbuttons/textareas etc. but the exact minimum value which should be a part of the design.
This video accidentally answered so many questions I didnt even know I had. Thank you tons for this upload, truly!
You are the good part of the internet
Kevin, A point to consider regarding your form example is to not choose a solution specific to the particular labels (name, email, etc.) as many web pages will be localized and the sizes of those labels will vary with language. You touch on this when you mentioned German. So if a page is designed which works for those particular labels, they likely wil need a different CSS solution when the page is translated to various languages.
I haven't even watched the video yet, but had to click, like, and save for later because I've never seen you scowl like you are in the thumbnail!
Thanks. I did run in this form problem this week.
In Theo's video I said do it on the .flex {...} due to I knew I did not want everything to have a min-width of 0, but it was the quick answer off the top of my head. I agree with you after thinking about it and watching this.
Genius Kevin, I didn't understand the min-width 0 at all, but not only have you taught me something, I've got a new entry in my CSS reset
One thing I remember from wrangling with flexbox and word break is that you can tell the browser where to break words manually by insertings soft hyphens (). This works well when your content is static or when it's something like emails, you can choose to insert soft hyphens around the punctuation marks. There are also things like Wordpress plugins that insert soft hyphens in user-provided text without having to rely on the browser.
min-width 0 on e.g. grid element where its content is narrower and centered is making that content left side hide off screen on smaller screens when element starts shrinking :)
Man i had a problem with css yesterday and now you post this which solves it… what a timing
Thanks for this nerdy deep dive.
An excellent explanation of the behavior of the browser.
This is very helpful and I totally agree, but to be fair I think in most cases you'd media/containter query the flexbox before it gets into overflow-danger territory. But definitely good to know, especially when considering adding something to a global CSS reset file.
what kills me about this is like, as a user I don't WANT text inputs to shrink. they have an arbitrary intrinsic size for a reason. css strategies like this are a nightmare for accessibility. thank you for shining a light on this.
these things aren't that hard to see when you understand why the DOM works the way it does. it absolutely prioritizes content over layout which imo is a tenet that any kind of web design needs to embrace. not only bc it works better with the standard, but because it prioritizes the best possible user experience. being dogmatic about aesthetics usually only comes at the expense of usability in favor of a designer's neuroses that most users will never notice or care about.
Thanks for the vid kevin! I definitely agree with the points you've made.
I'd like to say, that It's hard to take Theo's opinions regarding CSS seriously after he mentioned that collapsing margins are a flaw in CSS and shouldn't exist.
I'm all for having strong opinions and challenging specific standards, but sharing them with your audience, when you aren't very knowledgable in the field, might cause a lot of new developers to refuse to learn other ways of approaching things.
I won't even comment on his take regarding HTML elements.
Very useful!
Thanks for the interesting video and greetings from Germany ;-)
15:20: Why use word-break: break-all? It works much better with word-break: break-word, which only breaks a word if it is too long to be placed on its own line (same as overflow-wrap: anywhere or min-width: 0 in combintation with overflow-wrap: break-word)
Don't use word-break: break-all;
Instead use word-break: break-word; overflow-wrap: break-word; together.
`word-break: break-word;` is deprecated, according to MDN
`overflow-wrap: break-word;` is supported for many years now, I'd suggest to use just that
One thing that I would like to point out is, HTML tables have a very similar behavior if no size is given to the cells. This has been the best way to handle content and designing a different algorithm for the default would most likely lead to issues that this behavior was created to avoid.
I am a big believer in handling the edge cases as they present themselves and never have a blanket rule that will then break the layout when viewed on platform that wasn’t tested.
This is unrelated to the video but 21:00
According to the updated docs, “self closing” is not a thing anymore, these are now called void elements. Self closing or keeping the trailing will trigger a warning/error when running it through the validator as it is only applicable for XML, XHTML and SVG.
This problem has been discussed - and explained - many years ago in several articles, one of them very famous too, in the context of content negotiation. It was true back then, but I think since we have lived with self closing now for so long (and IE6 is no longer a thing), it is not a good idea to throw that warning. I do like standards, yes, but standards are based on how people use the language, so self closing has become standard now. I don't see how this can violate anything. More does it make it easier to go from HTML to XML when all tags are closed.
There are other problems, which it would make more sense to focus on than this.
Personally I like self-closing, because when I'm in my sleep-deprived daze at 3am I can see more quickly which elements do not have a closing tag, which helps to see the closing tag of its parent faster.
@@doyoufeel...thatyoulackcri6760 the docs have leftovers in multiple pages. The attribute page references self closing elements too and there isn’t really a proper explanation in the void elements article either. All I can see is that some attributes can be used with unquoted values and adding a trailing at the end will be appended to the preceding unquoted attribute.
@@TheThirdWorldCitizen Yes, I found something similar. The concern seems to be things like where it is hard to see where the slash belongs.
I can understand the trailing slash problem can be a problem for beginners, but if you know how to self close a tag like , wouldn't you also use quotation around the attribute value like in XML? And in that case, maybe they shouldn't throw a warning then?
I am not sure I understand the problem so thanks for this. I will have a watch after work
Awesome video
I once debugged 8hours straight because I forgot I had something similar in my generic.css. So, I will definitely not fall for it again!
Btw. I had: "max-width: 100%;" for all img, svg. The problem appeared in a container with relative position.
What was the problem with `max-width: 100%` on img and svg?
@@shoelaced I dont remember exactly, but the width of my menu items (svg + text) didnt match the containers width.
The reason was because the menu container was set as position: relative and width: fit-content. The browser had to render the items before the container, but at that time the container had the width of 0. So the svg-width were set to 0 (because max-width: 100%).
I'm curious about your view on `body { overflow-wrap: break-word }`. While the breaks are still arbitrary, they only apply to words that don't fit on a single line with a wrap right before it.
Don't make me go down this rabbit hole again
Can you make a video of a tour on the inspector tools as a frontend?
Random video request. Could you do a video(or have you done a video) on the nuances of how to work with CSS inside of cross platform frameworks like Ionic?
I haven't, but that's an interesting topic and I might know the perfect person to help with that :D
I'm on team "default behavior"
You're only allowed to break a rule, if you understand the rule 😇
nice kevin, ty.
CSS overflow is there for a reason: If the design is buggy, the content can still be seen and accessed.
Slightly off-topic but in the future versions of CSS we will be able to use the "field-sizing" property to adjust the width of input, textarea and select elements
Seems like this boils down to using flex when you should be using grid. Learning when to use grid (even for single column layouts) is something you taught me Kevin and I am forever indebted to you :)
Anyone considering setting "max-width: 0" for any element must ask themself "should this element be able to be zero pixels wide?" In virtually every case, the answer will be "no"
Setting "min-width: 0" would be terrible on form inputs. What if the label gets longer and now the input has no width? The form becomes unusable.
Instead, think of an appropriate non-zero min-width for each scenario.
Correct me if i'm wrong but form inputs if done properly are triggered/targeted when label is clicked on.
@kevinpowell at 15:30 you talk about the crapiness on breaking text. I don't think it is that bad when using overflow-wrapping on words (not word-break), combined with hyphens (and a specified language, of course). As mostly your projects are in English -- and mine in Dutch -- vocabulary on a specified language does a great job on properly wrapping text. If not hyphen-able (?!?), you'll get a min-width hard word break. You'd have to stop using Lorem for your project and demo's, though (which is not a good idea anyway).
What is this extension (? ot not extension) that shows this circle like icon on the right side of focused input?
Grammarly
@@erickdavid4257 Thank you!
Where light is, there is a shadow.
Another example of Chesterton's fence.
Amazing, I loved this more in depth videos, create a secondary channel for contents like those if you are afraid of messing the algorithm
I love this
15:35 Could you expand on that? Specifically, why do you think hyphenation is crap? Is it because that `hyphens: auto;` doesn't have support all languages yet? I can see there are more and more languages added. You mentioned German as an example, there is already support for hyphenation of German texts.
And regarding breaking only those not fitting words, there is `overflow-wrap: break-word;`.
I've developed several websites in Scandinavian languages which, just like German, have many long words due to compounding rules. My experience is that `hyphens: auto` is pretty much useless despite those languages are listed as supported. The breaks rarely occur on the right spots which causes annoyance for the reader. I don't think it works well enough for sites in English either, unfortunately. :/ It's a much safer bet to simply apply soft hyphens () wherever it might be needed.
Agree on that `overflow-wrap: break-word` is a good fallback behaviour. :)
We can agree or disagree on "the web should scroll instead of hiding content", but we must agree that "the web should be the way the developer wants it to be and not fight against it". If I give something some width or height, it should not be different than that depending on some condition.
and you're doing the best job to fall in love in css :)
Great
Why till now this channel not 1m subscribers !!!
👍
I can watch your videos in pip mode in the CZcams app.😊
Please pay attention kids, the man is talking
ok hear me out:
* { display: grid }
also `min-inline-size`
I'm very new to Frontend. 3 months. But I'm happy to say I understand a bit about it. Will keep improving my skills from this type of good mentors. ❤
❤
Hello, thank you. With love from Ukraine
Can't we use instead min-width: 0; a min-width: max-content;
Nope.
It's blow my mind 😂
I just realize you are saying "font-end friends". I thought you are saying "friend and friends " 🤦🏻♂
While I understand the concept of why this is not the best idea; if a two-column layout reaches this breakpoint, the more ideal layout should have both columns stack with a width of the viewport width less whatever margins are favored. Multiple columns are great to an extent, but it gets to a point where trying to keep that multi-column layout in such a narrow breakpoint is just folly…
TLDR: Once you shrink down to mobile breakpoints, multi column layouts are pointless…
Oh yeah, I get it now…
Well put again!
This always happens if ppl (devs) try try to solve an edge case problem with "clever" hacks because they used the wrong layout system in tha first place.😂
And eventually they throw in !important ....
Just don't put any layout stuff (widths, margins, positioning) on the universal selector, you're only making your life more miserable in the end for no reason.
I don’t like resets in general
Basically, this hack is pushed by programmers, who were forced to write some css and want to "just get job done", not bothering with all that extra stuff and edge cases.
It's kinda like fishing with a dynamite. Super quick and efficient, but, well... the consequences.
Thanks for such a detailed guide, it was very useful.
As a programmer I confirm. We like fishing with dynamite.
exactly
Tailwind is all about that
There is a css work-break: break-word;
Should that not be `min-inline-size`? 😉
as much as i loved tailwind when it first came out, i think Adam sadly lost vision for what he aimed for , tailwind didn't need a v3 nor a v4 but it's become a money making machine and it's America. so prepare yourself for more non-sense in the upcoming versions cause css ain't the priority anymore.
Adam Wathan made a tweet... 😑
TLDR; Critical thinking 101, don't trust any advice blindly just shouted on the web and verify before using everywhere. You don't want your prod users to be the testers.
hey there mate! i need help. I wanna create a pop out side menu bar like the one in youtube. where on hover the side_menu_bar pops out like a traslation in x axis. its more like a nav bar but it pops out from the left
The intro is too long mate
Whatever its effects, if the creator of Tailwind thinks it's a goos idea, I will vehemently protest it lest it get too popular
0 views 7 likes 💀
YT's view count doesn't match the actual views most of the time. My dashboard is more up to date than the YT screen, I've seen gaps of over 1000 views. I donno why the main YT site lags behind so much 🤷
@@KevinPowellit’s probably cached because they allow the users to navigate with the player open
that guy wathan is corny af
take everything he does and says with a grain of salt