How to get flex to shrink to content for wrapped text?

The following is part of a Vue3 component, using Tailwind: <template> <li class="block border-b border-b-white/20 bg-white/20 py-2 pl-6 pr-2 text-sm hover:bg-white/30 -outline-offset-4"> <div class="flex gap-x-5px"> <span class="border-1 border-green"> {{ subItem.label.replace(/[^ ]/g, 'x') }} </span> <ExternalLink v-if="computedTag === 'a'" class="translate-y-0.5 border-1 border-blue" /> </div> </li> </template> I've put a border around the flex elements - if the subitem.label in the span element (green border) has a length that requires it to wrap, I would like the flex box to shrink horizontally to contain the wrapped text, without the extra space on the right that you can see in the attached image.