Ellipsis on flexbox items

In this article I will explain how to add ellipsis on flexbox child elements.

I had this problem a while ago and I've found a solution surfing the web, I've prepared also some codepen to show examples and let you understand better.
Jump to the last codepen if you are in eagerto see the solution

What do we want

Let's see immediately what we want to achieve.

Ideally we want to create a flexbox row with one (or more) "fixed" element on the left and a long element on the right and if the flexbox container shrinks (due to a user resizing the window for example) I want the long child on the right to be truncated with ellipsis.
(The fact that the child elements are on the left or right doesn't really matter, what I will explain works also if you want to truncate the child on the left and set the one on the right as fixed)

Let's try this out

"Well... That was pretty easy... what is the problem you are talking about?"
I can hear you saying this, so I will immediately show a very similar example and we'll see if you catch what's the difference

Did you catch the difference?
The change is that in this example the flex children has some elements inside (a p element), so it's actually a more common case rather than having simple text.

Below there is the codepen with the solution, after the example I will explain what the solution is and why it works like that (because at first glance it looks like magic).

Again, did you spot the differences? (spoiler, there are two)

1) The css ellipsis properties are now applied to the p inside the flex child
2) min-width: 0 is applied to both the flex children (and this is what looked magical, at least to me)

If you are asking yourself "What? Why is a min-width: 0 solving this problem?" you are like me so I dived deep into this and I've found the reason behind this.

The solution can be found in this spec.
I suggest you to read it, but to be synthetic the min-width by default is auto, and with that value Flexbox set the min-width as the minimum content size, thus when the container is not going to shrink that child more than that width. Infact the solution is setting a min-width, can be also different than 0, try experimenting in my codepen above.

I tested this in Chrome, Firefox, Edge and Opera. I don't have a safari to test it out but I'm pretty sure it will work, let me know if you can try that out too.