5 ms·
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 mad
by insin 2y ago
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.
- jbeninger 2y agoFor 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 2y agoI totally agree. And not only is it unintuitive, it's bad for layout performance!
- pcchristie 2y agoYou'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...