UnderlineNav items collapses into the more menu then it is wrapped with a flex

[broccolinisoup]

Description

When UnderlineNav is placed into a flex container, even though there are enough space, items are collapsed into the menu. I suspect that is happening due to the overflow behaviour. When there is any "autonomy" given to the underlinenav container using like max-content, auto etc, it simply renders the item in less space as possible i.e. collapses them under more menu.

This is problematic when UnderlineNav is used along with other elements in the same row when styling with flex. An example is reported here in Slack (Hubber only link )

Seems like this was working fine on the v35.21.0 based on the case shared above in slack🤔

Steps to reproduce

1. Go to any stories on underlinenav storybook
2. Wrap the Underlinenav with a flex container like below

<Box sx={{display: 'flex'}}>
    <UnderlineNav aria-label="Repository">
      {children.map((child: string, index: number) => (
        <UnderlineNav.Item key={index} icon={child.icon} href="#" aria-current={index === 0 ? 'page' : undefined}>
          {child.name}
        </UnderlineNav.Item>
      ))}
    </UnderlineNav>
</Box>

3. Observe the items are pulled into the menu even though there is enough space

Version

v36.9.0

Browser

No response

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[lesliecdubs]

👋🏻 @broccolinisoup I saw this got reopened. Is this something you're actively working on, or do we need to run it through a more focused triage session?

[broccolinisoup]

Hi @lesliecdubs 👋🏻 I am not actively working on it however I'd like to address this issue whenever I get a chance. I believe it is a limitation in the component though it is a very low priority. Only one team reported so far (as far as I know) and we found a workaround for them - let me know how you want to move forward with this issue - whether or not keeping it open.

[lesliecdubs]

@broccolinisoup thanks for the update! I'm comfortable leaving this issue open in the Primer backlog to circle back to when you have some time. Let's move this back to the "Inbox" if other reports come through about it.