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

width: 1px

width: 1px

width: 1px the overflow behavior is ruined, even though the 1px width doesn't seem to be used.
The

max-width: 100%

max-width: 100%

max-width: 100%

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.

TomOP•2/24/23, 3:24 PM

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.

TomOP•2/24/23, 4:07 PM

i guess my bigger question though is "how SHOULD i be doing this?"

erik.gh•2/24/23, 4:57 PM

what are you trying to achieve in the first place?

TomOP•2/24/23, 4:57 PM

i want the behavior you get when you add the width: 1px

TomOP•2/24/23, 4:58 PM

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•2/24/23, 5:00 PM

just remove the

min-width: max-content;

min-width: max-content;

on the .wrapper

TomOP•2/24/23, 5:01 PM

i need that for other things in my layout

erik.gh•2/24/23, 5:01 PM

eh?

TomOP•2/24/23, 5:02 PM

so the fiddle is a simplified version of this problematic layout in my app

TomOP•2/24/23, 5:02 PM

the layout looks like this

TomOP•2/24/23, 5:02 PM

TomOP•2/24/23, 5:03 PM

and the part that the fiddle represents is the list of options on the left

TomOP•2/24/23, 5:04 PM

when i remove the hard-coded width i get this:

TomOP•2/24/23, 5:06 PM

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

TomOP•2/24/23, 5:07 PM

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

TomOP•2/24/23, 5:08 PM

i want them to be as wide as possible until they hit the max-width that i set

erik.gh•2/24/23, 5:10 PM

assuming the .wrapper in your example is that column why are you setting a min-width instead of a max-width then?

erik.gh•2/24/23, 5:11 PM

as i understand it you want the width of that column to always be the same right?

TomOP•2/24/23, 5:12 PM

im sorry. i did a bad job explaining it

TomOP•2/24/23, 5:13 PM

the column needs to be responsive

TomOP•2/24/23, 5:14 PM

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

TomOP•2/24/23, 5:14 PM

thats basically all of it

TomOP•2/24/23, 5:21 PM

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•2/24/23, 5:24 PM

maybe

width: fit-content;

width: fit-content;

TomOP•2/24/23, 5:24 PM

on which div?

erik.gh•2/24/23, 5:24 PM

on the wrapper?

erik.gh•2/24/23, 5:24 PM

and no styles on the inner

erik.gh•2/24/23, 5:25 PM

with that the wrapper will always be as small as possible but never larger than the parent which is the column

erik.gh•2/24/23, 5:25 PM

or maybe i still don't understand haha

TomOP•2/24/23, 5:26 PM

whats the difference between min, max and fit then?

TomOP•2/24/23, 5:26 PM

that worked

erik.gh•2/24/23, 5:26 PM

nice

TomOP•2/24/23, 5:26 PM

but idky

erik.gh•2/24/23, 5:27 PM

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

TomOP•2/24/23, 5:27 PM

no im sorry

TomOP•2/24/23, 5:27 PM

min-content, max-content, fit-content

erik.gh•2/24/23, 5:28 PM

oh sorry

erik.gh•2/24/23, 5:29 PM

this is a great article:
https://blog.logrocket.com/understanding-min-content-max-content-fit-content-css/

LogRocket BlogIbadehin Mojeed

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.

TomOP•2/24/23, 5:31 PM

ill take a look

erik.gh•2/24/23, 5:31 PM

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.

erik.gh•2/24/23, 5:32 PM

these are the important parts