cssflexboxtailwind-css

Why span flex items arent shrinking?

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.

enter image description here

    <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>
Solution

  • They shrink fine in isolation as evidenced in this JSFiddle which could suggest there is some higher-level flex or grid layout that this HTML is inside where by at least one parent of this HTML that is in said flex/grid layout needs min-width: 0 applied to it.