How to get flex to shrink to content for wrapped text?
The following is part of a Vue3 component, using Tailwind:
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.
<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.
A friendly place for developers to meet other devs, ask questions, get help, and just have a good time 🙂.
36,263Members
Resources
Similar Threads
Was this page helpful?
