On: Show HN: Struggle with CSS Flexbox? This Playgroun...

[philippta]

I never struggle with flexbox itself. But getting a flexbox right in which the content overflows is always a mystery to me.

If anyone has a guide or spec how overflow rules apply in CSS, please share.

[insin → philippta]

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 → insin]

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 → insin]

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 → jbeninger]

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

[cluckindan → philippta]

Use box-sizing: border-box on everything and your life with flexbox will be a lot easier.