Cannot find a way to have ellipsis and width of content at the same time

I am using Tailwind and I am making clearable chips for a filtering component.

I have a flex container and I need the chips inside to be the width of the content. But when the width is too small I want then to do an ellipsis.

<!-- Clearable chips section --><div class="flex flex-wrap"><div v-for="index in 5" class="flex gap-1 items-center"><span class="whitespace-nowrap overflow-hidden overflow-ellipsis">      A long inner text that should collapse into an ellipsis when screen is small</span></div></div>

I have tried a few solutions but I either have the width corresponding to the content or the ellipsis but so far, never both.

Here is an example: https://play.tailwindcss.com/sY9oewBwBl