Weird min-width: max-content behavior (jsfiddle)

Can someone explain to me what's happening in this fiddle? https://jsfiddle.net/th147dmf/53/ This is a simplified version of something that is happening in my actual app. If you comment out the width: 1px the overflow behavior is ruined, even though the 1px width doesn't seem to be used. The max-width: 100% doesn't change the behavior either way. even though it seems like it should. Can someone help me understand whats going on here?
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
67 Replies
Tom
Tom2y ago
After a little more experimenting I noticed that none of the fiddle can be simplified even more so that it doesn't do the line clamping my app does: https://jsfiddle.net/th147dmf/72/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
Tom
Tom2y ago
i guess my bigger question though is "how SHOULD i be doing this?"
erik.gh
erik.gh2y ago
what are you trying to achieve in the first place?
Tom
Tom2y ago
i want the behavior you get when you add the width: 1px but i want to understand why that works or if its actually terrible (like it seems) and why max-width: 100% didnt work
erik.gh
erik.gh2y ago
just remove the
min-width: max-content;
min-width: max-content;
on the .wrapper
Tom
Tom2y ago
i need that for other things in my layout
erik.gh
erik.gh2y ago
eh?
Tom
Tom2y ago
so the fiddle is a simplified version of this problematic layout in my app the layout looks like this
Tom
Tom2y ago
Tom
Tom2y ago
and the part that the fiddle represents is the list of options on the left
Tom
Tom2y ago
when i remove the hard-coded width i get this:
Tom
Tom2y ago
the min-width: max-content is applied on the root div that holds all the tabs and i want it to stay the same width as you shift between tabs im sorry, thats poorly stated. i want the root div for the left side of the UI to not force any of its children to shrink i want them to be as wide as possible until they hit the max-width that i set
erik.gh
erik.gh2y ago
assuming the .wrapper in your example is that column why are you setting a min-width instead of a max-width then? as i understand it you want the width of that column to always be the same right?
Tom
Tom2y ago
im sorry. i did a bad job explaining it the column needs to be responsive but i want it to take up as much room as possible up to a max-width that i set and i dont want any of the children to overflow it horizontally thats basically all of it so my idea was to set the max-width the way i wanted it and then use min-width: max-content to make sure the children didnt overflow
erik.gh
erik.gh2y ago
maybe
width: fit-content;
width: fit-content;
?
Tom
Tom2y ago
on which div?
erik.gh
erik.gh2y ago
on the wrapper? and no styles on the inner with that the wrapper will always be as small as possible but never larger than the parent which is the column or maybe i still don't understand haha
Tom
Tom2y ago
whats the difference between min, max and fit then? that worked
erik.gh
erik.gh2y ago
nice
Tom
Tom2y ago
but idky
erik.gh
erik.gh2y ago
so min-width says this element may never be smaller than the set width max-width says this element may never be larger than the set width those are just constraints for when your normal width attribute is dynamically set eg. 100% or something
Tom
Tom2y ago
no im sorry min-content, max-content, fit-content
erik.gh
erik.gh2y ago
oh sorry
erik.gh
erik.gh2y ago
Ibadehin Mojeed
LogRocket Blog
Understanding min-content, max-content, and fit-content in CSS - Lo...
Learn about the fit-content, min-content, and max-content.In keyword values in CSS and how to use them in real-world projects.
Tom
Tom2y ago
ill take a look
erik.gh
erik.gh2y ago
min-content: According to the W3C specifications, the min-content is the smallest size a box can take without overflowing its content. max-content: According to W3C specifications, max-content represents a box’s ideal size in a given axis when given infinite available space. fit-content: Depending on the size of a container element, when applying fit-content to a box element within the container, the box either uses the max-content size, the min-content size, or the available container as its ideal size. these are the important parts
Tom
Tom2y ago
ok..... im gunna need to read more about this. but i have a meeting right now thanks
erik.gh
erik.gh2y ago
no problem
Tom
Tom2y ago
ok so that makes sense for what fit-content is but min/max-width: fit-content now seems really weird to do but its in tailwind and they usually try to push people away from bad practices so im still confused but for now this is solving the problem so tyvm
erik.gh
erik.gh2y ago
i think there is an easier way to architect this with just flexbox and maybe grid for the whole layout but i assume you don’t want to refactor everything 😂
Tom
Tom2y ago
sorry. back from meetings / lunch i'd really love to learn it for me the big issue in my app that kinda prevented a lot of things was scrollbar placement like theres tons of demos of stuff online that look like this: https://n27v5.csb.app/ but if you want the scrollbar to not be in a really dumb place i havent fond any way to do some of this stuff but with at least some position: absolutes also the layout COULD be a lot simpler if i wasnt also trying to make my code maintainable and have reusable components but it seems really challenging to build a component that you can use in different places when the parent might be display: flex, it might be display: grid or anything else not to mention the fact that css only really has good support for screen-based media queries so i cant ebven make descisions based on the size that a given component actually is idk. it seems like impossible to build good modular css with how everything in css is so based on what its parent / children are doing
erik.gh
erik.gh2y ago
i totally agree you're basically trying to build your own component library which can be very challenging to get right although there is already a draft for container queries it's far from usable i think the two most common methods for this problem are: (0. components should only contain visual (not dimensional or positional) styles maybe defaults at most) 1. allow passing of additional classes to the component (so dimensions and position can be set from context) 2. variants (render different component based on some prop not sure what you mean with that scrollbar problem... if you have an example i can have a look
Tom
Tom2y ago
0) so my problem with that is that if the component needs to work at every size then every component needs to be completely responsive, which seems to necessarily reasonable or like a good use of time for instance, if i have a card it doesnt make sense for me to make that card work at full width of the screen if its never designed to be bigger than the width of a phone screen and even if i did want to make all of my components super responsive i still only get to make them responsive based on the width of the screen because, as you said, its 2023 and people are just now considering the idea of container queries my current solution for this is that my components have variants that work at different approximate ranges of widths
Tom
Tom2y ago
so for instance the row of options weve been talking about has a 'thin' variant which looks like this:
Tom
Tom2y ago
but the parent layout decides which variant it should use which i guess is exactly what you meant by (2) but even by doing variants, theyre only approximate. they dont work for every situation the parent might decide to put them in so i end up with a lot of wrapper divs that just try to kind of isolate the component into some kind of predictable world that it can render itself in which kinda brings me to the scrollbar issue because i end up doing a lot of this 'div resetting' i end up with scrollbars in weird spots because some of the components had to reset overflow i dont have a great easy example of this cause ive worked around it in all the spots i know about
erik.gh
erik.gh2y ago
i don‘t think you should optimize every component for full page width but have the option to override the flex behavior the dimensions and self positioning from outside of the component variants should not change positional or dimensional styles they should change things like column layout different colors etc.
Tom
Tom2y ago
yeah but thats really hard cause theres like 40 ways the parent can influence the childs size, right?
erik.gh
erik.gh2y ago
in general you should not abstract every part of your ui into a component only if it makes sense what's the problem with just:
<MyComponent className="w-100" />
<MyComponent className="w-100" />
for example
Tom
Tom2y ago
i get that but im just saying it annoys me because it seems like that advice only makes sense because css has a billion ways to do everything and i have ^ in a lot of my components but theres nothing stopping me in there from only changing the actual things i should be able to touch like i want people to be able to specify width, but if i give them classname they can screw with the whole compoent itself theres no way i can make sure the caller is being responsible like that
erik.gh
erik.gh2y ago
oh yeah that's the problem then just allow an options prop to be passed to the component which only allows like width height etc and merge it into the className inside the component? if that makes sense
Tom
Tom2y ago
kinda except like from a ts perspective that seems like a nightmare cuase i need to be able to accept like pixel widths, and a bunch of special values parse that into classes eww
erik.gh
erik.gh2y ago
thought you were using tailwind
Tom
Tom2y ago
i am how does that help?
erik.gh
erik.gh2y ago
it doesn't i am just confused why you're using pixel widths and special values then
Tom
Tom2y ago
well 1) im using tw for 95% of things but my app has customizable themes which i cant use tailwind for sorry 1 sec almost done this thing
erik.gh
erik.gh2y ago
fair enough
Tom
Tom2y ago
ok back 2) even if i am using tailwind for everything so my options are a) provide a className parameter but i only want to be able to specify classes that will effect the sizing so i need a giant ts enum of all the w-*, min-w-* max-w-*, values and even then that doesnt really cover it cause i can do w-[203px] or b) i allow them to specify a width: number | 'min-content' | 'fit-content', etc but then i need to use a style object which means my app ends up being even less tailwind-y than i wanted it to be and i have 2 systems for styling almost everything cause i cant do w-${props.height} without breaking tw or c) allow className: string and just hope the parent doesnt screw with things too badly which is my current strategy
erik.gh
erik.gh2y ago
or something like this?
type SizeClasses = `${'w' | 'min-w' | 'max-w'}-${number | `[${number}px]`}`
type SizeClasses = `${'w' | 'min-w' | 'max-w'}-${number | `[${number}px]`}`
that's not a good idea width this it doesn't get too complicated but if you want to have it to be more restrictive you could use my type
Tom
Tom2y ago
is that a valid ts type? you can bake regexes into the types like that? yeah i know. im just listing all the options i can think of idk. but theres other problems in there too. like even with your SizeClasses type (if it does work) 1, i cant specify a min and max width i cant specify flex-1 or any other flex prop also there are other props that are even more conviluted like how i can have a component that i really always want to be display: flex, but the parent wants it to be display:none
erik.gh
erik.gh2y ago
improved it a bit
type UnionToTWClasses<T extends string> = `${T}-${string}`
type SizeClasses = UnionToTWClasses<'w' | 'min-w' | 'max-w'>
type UnionToTWClasses<T extends string> = `${T}-${string}`
type SizeClasses = UnionToTWClasses<'w' | 'min-w' | 'max-w'>
yes it's not regex but yes
Tom
Tom2y ago
Not quite regex. But you more what I mean
erik.gh
erik.gh2y ago
why can't you just add it to the union
type UnionToTWClasses<T extends string> = T | `${T}-${string}`
type UnionToTWClasses<T extends string> = T | `${T}-${string}`
Tom
Tom2y ago
I guess maybe it’s possible if you can do that. But that type seems like it would get crazy if I tried to list out all the properties a parent can specify that affect size
erik.gh
erik.gh2y ago
at some point you have to make a decision either allow everything
Tom
Tom2y ago
Idk. Right now my mind is just blown that you can specify types like that
erik.gh
erik.gh2y ago
or restrict it there's no way it will magically know what to allow and what not haha cool right?
Tom
Tom2y ago
I know but none of this seems like “the right way” TM It seems very complicated and manual and if tailwind wanted me to be doing stuff like this they would have included those types in some package for me to use
erik.gh
erik.gh2y ago
normally you don't restrict that access i'am just saying like keep it stupid simple over abstraction results in over complication
Tom
Tom2y ago
That’s what I’m doing now but it feels like there should be a solution for this
erik.gh
erik.gh2y ago
i don't know if there is a problem tbh i think you're trying to build a fully autonomous component library as a side effect which companies like shopify do to keep a consistent look throughout their applications but is mostly overkill for projects at normal scale
Tom
Tom2y ago
Kinda but I feel like I’m really just trying to draw reasonable boundaries between parents and children Maybe that’s asking too much
erik.gh
erik.gh2y ago
maybe someone else has another opinion on this...
Tom
Tom2y ago
Maybe. I gotta sleep now. Thanks for the chat Have a good night
erik.gh
erik.gh2y ago
cya
Unknown User
Unknown User2y ago
Message Not Public
Sign In & Join Server To View
erik.gh
erik.gh2y ago
this is so cool thought they were still working on them maybe that's the solution to your problem then
Tom
Tom2y ago
Hmmm. Thanks for the link. I thought they weren’t going to be supported for like another 6 months
Want results from more Discord servers?
Add your server