Oh no, I think I like this
HTML-код
- Опубликовано: 10 янв 2024
- min-width rules with flexbox are...terrible, honestly. Happy Adam said it so I didn't have to.
First blog I showed (Shadeed's Defensive CSS): defensivecss.dev/tip/flexbox-...
Adam's tweet: / 1
Josh's blog post: www.joshwcomeau.com/css/inter...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit🙏 
Наука
Didn't credit Ahmad Shadeed properly for his Defensive CSS blog post featured early in the video. Updated the description but here's a direct link for those interested! defensivecss.dev/tip/flexbox-min-content-size/
Fronend developers being on the same page makes several layers of sense
The longest part of building a website is getting the styles and layout right. I can't tell how many times I've encountered a css problem with overflowing or other things that took me way too long to fix than they should.
This. I used to focus so much on styling then filling in the style with functionality -- and I would end up getting burned out just fixing weird bugs/side effects. Now I build a shit looking functional version of what I'm looking to build, then fill in the style after.
I’m working on upgrading a website from Angular 7 (I know…) to Angular 16. Most of my issues come from the upgrade of CSS frameworks I had to upgrade along the way.
Please, just at one time give me immediate UI in the browser! My WebApp would have way less complexity if not for all the CSS (and DOM!) nonsense.
i was literally just struggling with the fucking word wrap not working im immediately gonna apply min width 0 to my project now
Chill bro we all deal with this lol
Make sure it is not a very long word instead of a set of words.
Fr
I never expected to find the fix to my current issue here 😅
Insta?
Inputs are inline-block elements and they would collapse to nothing when there’s no min-width.
So it makes sense what browsers are doing
It took me hours to figure this out! Only by asking people and literally fearing they would think I was stupid was I able to solve this! It felt so counterintuitive that I was almost certain I was doing something wrong. THANK YOU for addressing this!
I worked as a frontend developer (called 'web designer' back than) in the early 2000s, the Netscape Communicator and Internet Explorer 5/6 era. I always hated the state of CSS and the inconsitent implementation of the standards. I hated the pixel pushing for each browser. Therefore I shifted to backend development and avoided the frontend as possible. The tools became better but it seems some things never change 😆
Sudden flashbacks to Holly Hacks. Thanks for that.
this is one of those videos that came at the exact right time, I was dealing with this problem literally just right now and this was the solution
Every time you think you have a grasp on something you are humbled
We need more tips like this!
@@ino98wat
I love Josh Comeau's blog posts. I have several bookmarked because they are a great reference
I've probably solved, forgotten, and resolved this problem more than a few times.
As long as you keep in mind that browsers are designed for accessibility in mind, vague min-width values on elements DO make sense, cause the priority is visible, accessible content and not styles applied the way we intuitively expect them to be. However, I would appreciate some kind of "design linting" more than defaults like these where input has to be at least 200px. We all know "CSS is awesome" meme with overflowing content, so this thing shouldn't be a surprise for many.
Thanks for all you do for the community man!
This is super helpful and probably was the solution to a problem I've had a few times and wasn't able to sort out. In those cases, I just threw everything away and started from scratch for the sake of speed. This is good to know.
I recently had this problem...applying min width:0 workwd but I couldn't understand why and it felt so wrong. Glad to see additional context
I’ve been in the web dev game for most of my life at this point, and I have to admit I’ve never realized that this was causing those bizarre overflow issues. Great video! I’m going to use the “reset” style default from now on too. Once you think about it a bit, it seems to be a really sensible solution to a problem that can take a while to figure out each time.
min-width: 0 on everything will cause problems too though. I would recommend making it a utility class and apply it as needed
@@A.D.Gbased purely off of this video, the problems it creates is sane, while the default behaviour is just immensely confusing, so I'll at least try this as default. If you're using Tailwind this already is a utility after all
I literally ran into this exact issue on Thursday at my new job. Thanks for bringing it to the attention of more developers!
This came in perfect timing for me and helped fix a bug I was breaking my brain over! Thanks Theo!!
I'm sorry but I would hate that a website had inputs that were too short for me to type on. The minimum width set by the browsers makes sense, and if you're battling it then it probably means you're ruining the user experience.
Not really. I have worked on a website where the UI is contained within resizable panes, so if a user shrinks a pane small enough then they would expect the inputs inside it to shrink accordingly.
@@wlockuz4467 Why would it be beneficial for the user to edit the interface beyond usability? Again, if you're messing with the input's minimum width you're ruining the user experience.
@@alexandrecosta2567 In my case it was required for the panes to be "collapsible", so a user can shrink a pane to basically be 0 width or height.
I have to use min-height: 0 for the same reasons almost daily. It was something that I discovered on my own, but I never knew why it was necessary exactly. Thanks for the explanation.
The inputs don't have some weird default values for no reason; if you put one in markup with nothing else, it needs to be able to render somehow.
I imagine there'd be an accessibility-related reason too, but who cares about accessibility, right? lol
I haven’t thought this through too much, but I’m thinking it would be better if it just had a default width rather than min width??
You literally fixed a prod issue that popped up today.. I had no clue about this and our mobile site was acting wonky.. watched this and knew this had to be the issue. Thanks!
Thank you for this PSA! I can’t tell you how many times this has cost me HOURS! to fix
And thanks for posting about the awesome articles explaining
Just a note: An input having min-width: 170-200px (minus the range, that's just dumb) is kind of necessary so we can add input without styling. Otherwise it would be just zero width and not shown at all by default.
This comment deserves to be pinned! 🙌
Why wouldn't a default `width` suffice for that?
I mean, yes, it would give them a fixed width if that's what you are after! But the point is that without an extra rule, the advice given on the video makes inputs disappear all of a sudden.@@Drysart
Are you sure ?
I just made an input with type search in an empty page. And set min-width to 0. It didn't disappear.
Am I doing something wrong ?
Just checked, and you are absolutely right! It seems that the input gets its default width from its "size" attribute. Therefore, it will not be initially affected by the global min-width.@@Al-Mokadimah I take my previous comments back!
i appreciate this kind of content
I was just struggling with this, thanks for the suggestion
Thanks @Theo, it's as if you had lit a light. I had this situation so often and had to implement workaround over workaround...
Funny, I just ran into this issue at work and immediately remembered this vid(didn't take me 2 mins to fix). Props🙌🏼
Just had this problem 2 weeks ago wth, thanks for this 🙏
Thank you. I will update my CSS with this helpful code! 😃🙏
Thanks for providing these great examples. Even though flexbox has been available to use for a while I still have a lot to learn. Same with CSS grid.
I will be trying this out, thanks!
I sometimes ask myself if we should just start fresh. It would be nice to have a new CSS like style sheet built from the ground up with what we currently need for building modern web UIs without any weird legacy behavior.
Honestly, that's what Tailwind is for me. It's basically a better API on top of CSS. It means the Tailwind team can worry about these kinds of quirks so I don't have to. I expect Adam will decide to turn on this min-width default in Tailwind's reset in the next major version, if it gets enough traction... But it would be enough of a breaking change that it wouldn't surprise me if they decide not to, unfortunately.
The whole browser is like this, honestly. You would not believe the number of legacy quirks we still actively support in every major browser for backwards compatibility reasons. JS, HTML & CSS could all use a "okay now we know the end goal, let's get here without all the crap we made trying to figure it out".
CSS is awful, it really should just be expressed completely mathematically, and then we have people make nice wrappers on top of that. responsive design and layouts shifting are also trivially represented by fractions and whole numbers.
CSS already has fraction based %, vh, vw, dvh, cvh, etc... some things should not be fraction or we would have to go back to @media (min-width: X) where X is from 320px to 4kpx+ and that was way worse than this.
PS: I am not saying we shouldn't just drop support for some things in CSS.
Probably just a no-bs grid implementation, right - maybe with layers so modals still work and we can stop trolling ourselves with "position: fixed" or other stupid hacks to make elements that aren't actually in the order they appear on the document
This brings peace to my years of struggle
Have hit this problem a couple of times, never took me too long to fix (except maybe the first time, can't remember the first time), but the argument that it's an unnecessary step makes a lot of sense depending on what you're building. For a website (rather than e.g. a web app) I think it might be better to have the messy overflow, as content is more important than anything on a website (my mum has an increased font size set on her phone, and on her old phone that meant that the 'add to cart' button literally got cut off from the screen on one webshop... that's the type of stuff that hurts a lot more than basically anything else).
oh my god, this is what it was about ?! you are life saver, thank you
Thanks the native min width across browsers is really helpful too
A hardcoded min size for input makes sense, otherwise there is no way otherwise for you to use directly without any css. There would be nothing sizing the input field if you don’t have a flex parent or a placeholder text. I think vanilla styling is just applied via min width for consistency instead of a internally hidden fall back value
wow! this has answered a lot of problems i get with flex box, im gonna try this on an active project thats suffering
The first blog post does not show any source code. I tried recreating and it does not behave the way he describes - text does indeed shrink correctly when not applying any styling to it. While I agree that browsers setting custom min-width to stuff is confusing, flexbox being limited by min-width is absolutely correct and expected behaviour. Flex shrink cannot shrink lower than min-width (or height when in column layout) and flex grow cannot grow more than max-width. This is super useful for creating constraints for how flexible you want your flex items size to be.
This is the most useful video you ever made.
I honestly support this. At work we have a pretty complicated backend app and I've spent 2 days fixing an overflow issue in ~15 layers of flexbox. The issue is so hard to pin down and I had to go back up the tree and min-width several flexbox containers to get it working. I also had to add a flex-basis of 0 to the overflowing child and I don't even understand why that is necessary.
All of it is complicated further by us having an in-house React component library with components that use flexbox that I can't just override without some seriously sketchy and brittle selectors.
Why is this a thing? Things running out of room is easy to deal with. Does it makes sense for a 2 column layout to shrink to 100px? No! So I add a min-width when needed because I want the WIDTH to have a MINIMUM value. How silly of me. Of course the most intuitive use of min-width is to set it to 0, so the max width to the element doesn't exceed the parent container. It. Just. Works.
Just ran into this problem, will try this ty 😭🙏
Great explainer and solution video. Thanks
Its probably going to remain opt-in for a long time (if not forever) across the major browsers since they'd argue that chaning these default user-agent styles *could* have drastic effects on older websites. Considering how browsers want to largely remain backwards compatible with any and all older websites (with exception to security risks, i.e. Flash), this'll be one of those things that'll be opt-in on a per-website basis.
Hell, changing could even have no real user facing changes, and still browsers are reluctant to make changes to the default shipped styles.
I came across the input width problem in one of the projects. I haven’t found the solution, after trying literally everything… except the min-width. WTF? Who would take it as the way to go…
Same bro yesterday I received a new UI bug in my chip component. I just used overflow hidden to quick fix it now I will try this solution.
I just tried to set it as a default on a project I am working on, and it literally made parts that I assumed were not responsive because they were not done yet, directly responsive. Kind of mind blowing to have this as a default. It looks like I am keeping this.
We need a rust version of CSS tools where common unintuitive mistakes are part of the error system not hard to find gotchas that may or not be buried in the spec itself.
I wish this was something I knew about earlier! Could've saved me soo much time debugging
thanks, I didn't even realize min-width fixes this problem!!
This min-width fix is also required under certain circumstances with grid columns due to some strange behavior with inner paddings and other elements. Very weird stuff honestly, but works.
it's actually not that illogical.... setting min-width: 0 overrides the rule where block level elements ( or ) can only shrink to their actual content size.
This also happens in some display:flex; / grid; situations and can be used to solve quite a few situations when overflow causes inconsistencies in the UI
Amazing video !!
Had to do a quick project - mostly css.
Not even 1h into it I had the same issue of children not breaking properly.
Nice quick sum-up vidya, thanks.
found myself trying to like a second time during this video.
(references linked in described is immediate like btw).
guess I have to subscribe now.
This hits too close to home and I thank you for that 💙 WTF! Let's min-width zero everything now 😂
Great content!
Loved this video theo
I remember fighting exactly this 10 years ago with a success in the end when I discovered this min-width trick... What was worse at that time was that it was inconsistent between Chrome and FF, so fun debugging. In addition, this default input min-width of inputs also affected how proportionally cells were scaled even when they had the same flex-grow/shrink numbers until min-width was set to the same number (usually 0).
had the same issue today and now this video. wow
Thanks for sharing! I never really understood this. I watched through the video and funnily reached the exact opposite conclusion than Theo: I probably should *not* apply `* { min-width:0 }` because I think running into this min-width behaviour makes problems more apparent. Not the other way around.
There is a reason input box is min-width 170px: so that a user can actually use it (see text in it, hit it with their finger on a small screen to focus, etc). I’ve definitely run into when this flexbox behaviour but now that I understand exactly why this happens, I want to know whenever it happens because it’s a hint that I should be careful. The experience I’m building might be at risk.
I think it’s kind of dismissive to call this behaviour “stupid” and “legacy browser standards” when it might very well be a guardrail that makes the web better over all.
If I had to pick between overflowing content or clipped content, I take overflowing any day. At least I can still click an overflowing button.
I spent dozens of hours fixing broken layouts where the solution was to add some seemingly unrelated min-width: 0. It never occurred to me that I might want to add that to all elements by default, it seems absurd at first. But the more I think about it... I think I'll try it.
thank you for this vid! I am mostly a backend dev, but now i think I know why I've hated web frontend even though I love learning about good UI design.
It's not CSS that is broken, it is that we have each browser being opinionated on what default CSS values are, instead of requiring everything to be explictly declared.
I will now never use `auto` for anything in CSS again, unless I know exactly why I am using it!
Thanks again, very important vid!
Nice. Something new I learned 🤯
Thanks for this, I am messing with flex now :)
Faced it literally yesterday, and you know, I still remember this trick with min-width
What? I suffered so much... Thanx Theo
i ran into this problem just yesterday lmaoo i used "break-all" class of tailwind to break a long-ass word into multiple lines
informative video, thanks theo
We run into this often and the web app I work on typically uses the MUI Stack component for flexbox styles. Now that I know, I think I will toss min-width: 0, min-height: 0 into the default theme for the Stack component and see how it does.
Everyone running back to old projects for the revival
If you wrap all your text in p and you have a default for p that does the word wrapping it will make your screen more readable for screen readers (they easily pick up all p tags) and solve that second problem for you. Happy coding!
For CSS is the hardest part of all of that. There are also some weird default margins or paddings idk showing up for some elements but not for others.
I developed a video calling web app, and the number of times I encountered this challenge due to the layout needing to adjust to the viewport size was distressing until I figured out fix it
S tier content.
I had 3 days debugging a flex error, this was the solution but didn't know what element needed the min-width
this almost made me tear up
This is my first time hearing about min-width: 0px as a fix. I've spent countless hours on these layout bugs, usually resorting to completely changing the layout because I didn't know what else to do. Now I know. 👍
Surely the best-practice Tailwind solution is to add some inconsistently abbreviated terseness like class="mnw-x-zero" to every single HTML element, not to use the cascade.
Oh that was a nice one !
Thank you so muchhh
Good idea. Wonder if I can globally set it in react native
Lol good to know. Just hit this problem last night. Now I don't need to add a line break element in my page header
This is what you get when you design for the most generic vs the most common case
Faced a similar issue in next.js where for some reason headings had some default margin.
max-width: 100%; has been my go-to for any css issue in the past 6 years.
I have to use min-width: 0; now I have overflow issues when changing tabs on some gallery sites!
That case when the 2 container overlap is easily solved by setting to flex column instead of row when
This right here is the reason why I am a backend dev
Textboxes from the early days of the Internet having an implicit minimum width does make sense.
There was no CSS originally, and you were only making very basic pages.
much love ❤
You gotta make more intense faces. That's why I clicked on your video. The more intense your face, the more views you get, don't check just trust me.
You gotta just give in and realise your potential to the fullest, I can see that you are holding back. I'm looking forward to new thumbnails.
I'm bootcamping it atm, and I just spent a heavy 24 hours setting max and min widths on. so. many. elements, for exactly the weird overflow reasons you mention. At a certain point of complexity I stopped understanding why certain elements were overflowing and just started trying stuff 😂
Stuck on a layout problem today and it doesn't seem to end.
5:28 I think this "bug" is a storm in a teacup. If you need to shrink your columns so small that the contents don't fit anymore, you should stack them not shrink them.
Thanks Theo.
3:40 Building for the web is easy.
If you don't agree, then you were around during the dark days of the web.
that's why I use Grid almost all the time - it's much more predictable and understandable
What's incredibly frustrating is that this behaviour can stay hidden for a very long time if the container that is affected has dynamic text in it. The issue may not pop up until a particularly lengthy word ends up in your container.
OMFG your timing with this video could not have been better
On one of my projects I had ran into this _exact_ issue and it cost me nearly a day to figure out what was wrong
nice video !
Thanks