`ScrollArea` extends horizontally even with scrollbars="y" set

[pfo-omicsstudio]

Dependencies check up

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

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

8.1.0

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

When wrapping a Pill.Group inside ScrollArea.Autosize with scrollbars="y", the container grows horizontally instead of staying within its parent width, even though horizontal scrollbars are disabled.

What's more, the horizontal scrollbar that does appear is the native browser scrollbar and not the Mantine scrollbar.

https://github.com/user-attachments/assets/3eaba7d0-4bca-490b-9ff3-599dff016dca

Code to replicate (also available in codesandbox link below):

import "@mantine/core/styles.css";
import {
  MantineProvider,
  InputBase,
  ScrollArea,
  Pill,
  PillGroup,
  Button,
  Stack,
} from "@mantine/core";
import { useState } from "react";

export default function App() {
  const [pills, setPills] = useState<string[]>([]);

  const handleAdd = () => {
    const index = pills.length + 1;
    setPills((prev) => [...prev, "Pill ".repeat(index).trim()]);
  };

  const handleClear = () => {
    setPills([]);
  };

  const handleRemove = (id: string) => {
    setPills((prev) => prev.filter((item) => item !== id));
  };

  return (
    <MantineProvider>
      <Stack p="md" w={250}>
        <Button onClick={handleAdd}>Add Pill</Button>
        <Button onClick={handleClear}>Clear</Button>
        <InputBase component="div" multiline>
          <ScrollArea.Autosize mah={120} scrollbars="y" type="always">
            <PillGroup>
              {pills.map((datumId) => (
                <Pill
                  key={datumId}
                  withRemoveButton
                  onRemove={() => handleRemove(datumId)}
                >
                  {datumId}
                </Pill>
              ))}
            </PillGroup>
          </ScrollArea.Autosize>
        </InputBase>
      </Stack>
    </MantineProvider>
  );
}

This is similar to this bug report I made in May: https://github.com/mantinedev/mantine/issues/7748.

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

https://codesandbox.io/p/sandbox/mantine-react-template-forked-xlljwf?file=%2Fsrc%2FApp.tsx%3A9%2C9

Possible fix

No response

Self-service

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