+
Item {id}
+
+ {createRange(14).map((row) => (
+
+ Detail {row}
+
+ ))}
+
+
+
+ );
+});
+
+const wrapperStyles: CSSProperties = {
+ alignItems: 'center',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: 18,
+ padding: '30px',
+};
+
+const itemStyles: CSSProperties = {
+ alignItems: 'stretch',
+ height: 150,
+ maxWidth: 420,
+ overflowAnchor: 'none',
+ overflowY: 'auto',
+ padding: 0,
+};
+
+const contentStyles: CSSProperties = {
+ display: 'flex',
+ flex: 1,
+ flexDirection: 'column',
+ gap: 12,
+ minWidth: 0,
+ padding: '16px 20px',
+};
+
+const titleStyles: CSSProperties = {
+ color: '#222',
+ fontSize: 15,
+ fontWeight: 600,
+};
+
+const rowsStyles: CSSProperties = {
+ display: 'grid',
+ gap: 8,
+};
+
+const rowStyles: CSSProperties = {
+ background: '#f5f6fa',
+ borderRadius: 4,
+ color: '#666',
+ display: 'block',
+ padding: '8px 10px',
+};
diff --git a/apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx b/apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx
index 84c3c7324..d221f80a4 100644
--- a/apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx
+++ b/apps/stories/stories/react/Sortable/Vertical/Vertical.stories.tsx
@@ -5,6 +5,7 @@ import {Feedback} from '@dnd-kit/dom';
import {SortableExample} from '../SortableExample';
import {AnchorElementsExample} from './AnchorElementsExample';
import {AutoScrollExample} from './AutoScrollExample';
+import {ScrollableItemsExample} from './ScrollableItemsExample';
const meta: Meta