Truncated text with flexbox

TL;DR: You have to set a min-width: 0 (or any other value) to a flex child in order to truncate text via css.

Said in another way. This is the "standard" method to truncate text in css (thanks tailwind):

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

If the element is inside a flex (more specifically: if it's inside a flex but not a direct child of the flex container) you should add also another class

.min-w-0 {
  min-width: 0;
}

More info here: https://css-tricks.com/flexbox-truncated-text/