Both flex items li and span have set shrink but they dont actually shrink, why? span also has truncate to show text with ellipsis but they cant because they dont shrink. I want that width is fluid and that it comes from ul ancestor. min-w-0 is also set.
<ul class="flex gap-2 flex-nowrap lg:items-center [&_a]:border [&_a]:border-red-500 [&_li]:shrink [&_li]:min-w-0 [&_a]:min-w-0 [&_span]:truncate [&_span]:shrink [&_span]:min-w-0"><li><Link href={`mailto:${AUTHOR_EMAIL}`} title="Nemanja's email" target="_blank" rel="me noreferrer noopener" class="flex items-center gap-2 text-base xs:text-lg" variant="nav"><Icon name="mdi:email-outline" class="h-6 w-6 fill-current" /><span>Email</span></Link></li><li><Link href={AUTHOR_GITHUB} target="_blank" rel="me noreferrer noopener" title="@nemanjam on Github" class="flex items-center gap-2 text-base xs:text-lg" variant="nav"><Icon name="mdi:github" class="h-6 w-6 fill-current" /><span>Github</span></Link></li><li><Link href={AUTHOR_LINKEDIN} target="_blank" rel="me noreferrer noopener" title="Nemanja on LinkedIn" class="flex items-center gap-2 text-base xs:text-lg" variant="nav"><Icon name="mdi:linkedin" class="h-6 w-6 fill-current" /><span>LinkedIn</span></Link></li><li><Link href={ROUTES.API.FEED_RSS} title={`RSS feed for ${domain}`} class="flex items-center gap-2 text-base xs:text-lg" variant="nav"><Icon name="mdi:rss" class="h-6 w-6 fill-current" /><span>RSS Feed</span></Link></li></ul>