Nested NavLink - collapse animation frozen

[iamyoki]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/core

What framework do you use?

create-react-app (CRA)

In which browsers you can reproduce the issue?

Chrome

Describe the bug

Minimum reproduce link: https://codesandbox.io/p/sandbox/x5dnkl

Unexpected

Nested Navlink collapse animation get frozen when wrap in a flex column + overflow:auto container

Details

<MantineProvider>
  <div
    className="App"
    style={{
      height: 200,
      backgroundColor: "gainsboro",
    }}
  >
    <div
      className="navigation"
      style={{
        display: "flex",
        flexDirection: "column",
        overflow: "auto",
        height: "inherit",
      }}
    >
      <NavLink href="/" label="Posts">
        <NavLink label="All" />
        <NavLink label="Published" />
        <NavLink label="Drafts" />
        <NavLink label="Archieved" />
        <NavLink label="Deleted" />
      </NavLink>
      <NavLink href="/" label="Discussions">
        <NavLink label="All" />
        <NavLink label="Published" />
        <NavLink label="Drafts" />
        <NavLink label="Archieved" />
        <NavLink label="Deleted" />
      </NavLink>
    </div>
  </div>
</MantineProvider>

div.navigation contains all NavLinks, it scrolls inside if height exceeded. But with flex column + overflow:auto it always frozen.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/x5dnkl

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue