Been wrestling with this one client project all week. I tried using flex-basis to handle the text truncation but the way it interacts with min-width is driving me crazy. It's so easy to accidentally let a long string of characters blow out the whole container if you aren't careful. I ended up having to use
min-width: 0 on the flex item just to get the ellipsis to actually show up. Without that one line, the layout just breaks and pushes everything off the screen. It's such a tiny thing but it's easy to overlook when you're moving fast.
.flex-item {flex: 1 1 0%;min-width: 0;}