Flex, flex wrap and ellipsis

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 gap-2 py-2"><EducClearableChip      v-for="targetGroup in filters.targetGroup"      filter-name="Target group"      :option="targetGroup"      @cleared="clearOneFilter"  /></div>

And the component:

<template><div      class="flex gap-1 items-center bg-slate-50 rounded-full border border-slate-200 px-3 py-0.5"      @click="clearElement"><span class="text-sm font-semibold whitespace-nowrap">{{ filterName }}</span><ChevronRightIcon class="size-3" /><span class="text-sm font-semibold whitespace-nowrap overflow-hidden overflow-ellipsis">{{ option.name }}</span><XMarkIcon class="size-4"/></div></template>

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