[insin]

Every time I re-encounter this, I end up re-learning that min-width on flex items defaults to 'auto' and min-width: 0; is the secret sauce.

e.g. I recently made a component representing an attached file, where the flex items in its layout were:

    [icon] [filename] [button]

To get long filenames to not force their container to the full length of the string, so they could be truncated by text-overflow: ellipsis, I needed to put min-width: 0; on the flex item containing the filename.

[pcchristie]

You've just given me a flashback to a learning project I did 6 months ago where I think I had this exact issue with this exact type of layout, and I ended up going with some other forced hack to fix that problem because I never worked out the solution...

[jbeninger]

For my last few projects I've resorted to

*,*:before,*:after { min-width: 0}

I haven't had a single problem with it. I honestly feel this part of the spec was a mistake, given all the confusion I see. Online discussions suggest 'auto' is a counterintuitive default.

[nicoburns]

I totally agree. And not only is it unintuitive, it's bad for layout performance!