min-width has to be resetted to 0 for flexbox

[raphaelgoetter]

The "new" auto default value on min-width and max-width causes problems in Flexbox because flex-items do not shrink on small screens due to their content.

auto computes to 0 for most elements... except for flex-items and grid-items.

See: https://medium.com/the-crazy-coder/the-mystery-of-css-flex-layout-items-shrinking-8748145e96d9

Since auto is now default value for min-width, it can't be just resetted to 0 with initial, unset nor revert. We need to explicitly set it to 0.

See and try on Codepen: https://codepen.io/raphaelgoetter/pen/oLzzar?editors=1100

[elad2412]

This is interesting. It isn't connected directly to CSS reset, but maybe it is nice to have.

I am still not sure about this thing.

I will keep it open to check this thing more deeply.

By the way, What do you mean by the "new" auto default value? Isn't it has always been like that?

[raphaelgoetter]

Hello,

Here's the link to this part of Flexbox spec : https://www.w3.org/TR/css-flexbox-1/#min-size-auto

Note: The auto keyword, representing an automatic minimum size, is the new initial value of the min-width and min-height properties. The keyword was previously defined in this specification, but is now defined in the CSS Sizing module.

According to CSS 2.1 specs (https://www.w3.org/TR/CSS21/visudet.html#propdef-min-width), the initial value of min-width was 0.

According to CSS 3 (https://www.w3.org/TR/css-sizing-3/#min-size-properties) this value is now auto and this spec adds this note :

Note: The initial value of auto is new; in [CSS2] the initial value was zero.

I wrote an article in 2016 named (Flexbox) min-width: 0 is the new zoom: 1

[luboslives]

@raphaelgoetter is your solution simply:

* {
  min-width: 0;
}

Or should there be a more specific selector? In your article under "Qui est concerné ?", are these the elements that will be fixed by the rule or are they elements that should avoid the rule? Sorry my French (and Google's) isn't perfect.

Additionally in your Codepen it seems like it would be dumb to not pair the rule with overflow-wrap: break-word. Should this be considered as a necessary reset as well? Maybe it deserves its own rule inside a resetting or normalizing stylesheet anyway.

[raphaelgoetter]

@luboslives Yes actually it is (considering pseudo-elements too) : https://github.com/alsacreations/bretzel/blob/main/_base/_reset.scss#L5

We don't apply overflow-wrap on universal selector though, but only on HTML element : https://github.com/alsacreations/bretzel/blob/main/_base/_reset.scss#L12

Have a nice day :)

[raphaelgoetter]

At least!

https://twitter.com/adamwathan/status/1734696245015494711

[fabulousgk]

2 things:

Doing it with * may cause shadow dom issues. Second, what you are proposing is to reset the specification. I am not sure a widely used reset should do this. Maybe there are other things we are resetting away from the spec? Not sure just seems strange to me to move away from spec.

[raphaelgoetter]

Well, these are good points.

I'm not sure for shadow DOM issues, but other reset rules could have the same effect then, no?

Also, for "moving away from spec", actually a lot of rules in a CSS reset are doing this:

• box-sizing should be content-box according to specs
• display should be inline
• etc.

[fabulousgk]

Well there you go 😄 so that just leaves the selector. Is there a reason this can't be rolled into the main reset selector ie:

*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
min-width: 0;
}