Hacker News Reader

Comment by philippta | Hacker News Reader

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.

View on HN

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.

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.

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

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...

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

Reply on news.ycombinator.com