3 ms·

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 o

• 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 ago
    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 2y ago
      I totally agree. And not only is it unintuitive, it's bad for layout performance!
  • pcchristie 2y ago
    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...
• cluckindan 2y ago
  Use box-sizing: border-box on everything and your life with flexbox will be a lot easier.