[@mantine/core] ScrollArea: Fix content overflowing the viewport in some cases (#7748)

Author: rtivital

packages/@mantine/core/src/components/ScrollArea/ScrollArea.story.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { Box } from '../../core';
 import { Code } from '../Code';
+import { MultiSelect } from '../MultiSelect';
 import { Paper } from '../Paper';
 import { Stack } from '../Stack';
 import { ScrollArea } from './ScrollArea';
@@ -104,3 +105,24 @@ export function NeverType() {
     </ScrollArea>
   );
 }
+
+export function OverflowIssue() {
+  return (
+    <div style={{ padding: 40 }}>
+      <Box w={200}>
+        <MultiSelect
+          data={['This is a very long name to demonstrate the bug', 'Option2']}
+          defaultValue={['This is a very long name to demonstrate the bug']}
+          mb={10}
+        />
+
+        <ScrollArea w={200} scrollbars="y">
+          <MultiSelect
+            data={['This is a very long name to demonstrate the bug', 'Option2']}
+            defaultValue={['This is a very long name to demonstrate the bug']}
+          />
+        </ScrollArea>
+      </Box>
+    </div>
+  );
+}

packages/@mantine/core/src/components/ScrollArea/ScrollAreaViewport/ScrollAreaViewport.tsx

@@ -20,7 +20,7 @@ export const ScrollAreaViewport = forwardRef<HTMLDivElement, ScrollAreaViewportP
           ...style,
         }}
       >
-        <div style={{ minWidth: '100%', display: 'table' }} ref={ctx.onContentChange}>
+        <div style={{ minWidth: '100%' }} ref={ctx.onContentChange}>
           {children}
         </div>
       </Box>