fix: prevent overflow override on scroller in split-layout (CP: 25.1) (#11651)

Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 2 people

packages/scroller/src/styles/vaadin-scroller-base-styles.js

@@ -15,7 +15,7 @@ export const scrollerStyles = css`
     --vaadin-scroller-overflow-indicator-top-opacity: 0;
     --vaadin-scroller-overflow-indicator-bottom-opacity: 0;
     display: block;
-    overflow: auto;
+    overflow: auto !important;
     outline: none;
     box-sizing: border-box;
     padding: var(--vaadin-scroller-padding-block) var(--vaadin-scroller-padding-inline);
@@ -30,15 +30,15 @@ export const scrollerStyles = css`
   }
 
   :host([scroll-direction='vertical']) {
-    overflow-x: hidden;
+    overflow-x: hidden !important;
   }
 
   :host([scroll-direction='horizontal']) {
-    overflow-y: hidden;
+    overflow-y: hidden !important;
   }
 
   :host([scroll-direction='none']) {
-    overflow: hidden;
+    overflow: hidden !important;
   }
 
   :host::before,

test/integration/package.json

@@ -36,8 +36,10 @@
     "@vaadin/password-field": "~25.1.2",
     "@vaadin/popover": "~25.1.2",
     "@vaadin/radio-group": "~25.1.2",
+    "@vaadin/scroller": "~25.1.2",
     "@vaadin/select": "~25.1.2",
     "@vaadin/side-nav": "~25.1.2",
+    "@vaadin/split-layout": "~25.1.2",
     "@vaadin/tabs": "~25.1.2",
     "@vaadin/test-runner-commands": "~25.1.2",
     "@vaadin/testing-helpers": "^2.0.0",

test/integration/split-layout-scroller.test.js

@@ -0,0 +1,27 @@
+import { expect } from '@vaadin/chai-plugins';
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import '@vaadin/scroller';
+import '@vaadin/split-layout';
+
+describe('scroller in split-layout', () => {
+  let splitLayout, scroller;
+
+  beforeEach(async () => {
+    splitLayout = fixtureSync(`
+      <vaadin-split-layout style="width: 400px; height: 200px">
+        <vaadin-scroller>
+          <div style="height: 1000px"></div>
+        </vaadin-scroller>
+        <div></div>
+      </vaadin-split-layout>
+    `);
+    scroller = splitLayout.querySelector('vaadin-scroller');
+    await nextFrame();
+  });
+
+  it('should scroll the scroller content', async () => {
+    scroller.scrollTop = 100;
+    await nextFrame();
+    expect(scroller.scrollTop).to.equal(100);
+  });
+});