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