fix: set overflow: clip on the split layout content elements (#11296) (#11299)

Co-authored-by: Ugur Saglam <106508695+ugur-vaadin@users.noreply.github.com>
Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: 3 people

dev/split-layout.html

@@ -23,7 +23,6 @@
       .second {
         /* Force the natural width of both containers to be equal */
         font-family: monospace;
-        contain: paint;
       }
     </style>
   </head>

packages/split-layout/src/styles/vaadin-split-layout-base-styles.js

@@ -26,6 +26,10 @@ export const splitLayoutStyles = css`
     min-height: 0;
   }
 
+  ::slotted(:not(vaadin-split-layout)) {
+    overflow: clip;
+  }
+
   [part='splitter'] {
     --_splitter-size: var(--vaadin-split-layout-splitter-size, 8px);
     --_splitter-target-size: var(--vaadin-split-layout-splitter-target-size, 8px);

packages/split-layout/test/visual/base/screenshots/split-layout/baseline/overflow-horizontal.png

@@ -38,6 +38,36 @@ describe('split-layout', () => {
     });
   });
 
+  describe('overflow', () => {
+    it('horizontal', async () => {
+      element = fixtureSync(`
+        <vaadin-split-layout style="width: 300px; height: 100px">
+          <div>
+            <div style="min-width: 400px; height: 50px; background: #ddd"></div>
+          </div>
+          <div></div>
+        </vaadin-split-layout>
+      `);
+      // Shrink primary panel smaller than its content
+      element.querySelector('div[slot="primary"], div:first-child').style.flex = '1 1 80px';
+      await visualDiff(element, 'overflow-horizontal');
+    });
+
+    it('vertical', async () => {
+      element = fixtureSync(`
+        <vaadin-split-layout orientation="vertical" style="width: 200px; height: 200px">
+          <div>
+            <div style="min-height: 400px; background: #ddd"></div>
+          </div>
+          <div></div>
+        </vaadin-split-layout>
+      `);
+      // Shrink primary panel smaller than its content
+      element.querySelector('div[slot="primary"], div:first-child').style.flex = '1 1 60px';
+      await visualDiff(element, 'overflow-vertical');
+    });
+  });
+
   describe('nested', () => {
     beforeEach(() => {
       element = fixtureSync(`