fix: stretch slotted content to full cross-axis size in master-detail-layout (#11364)

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

Author: web-padawan

dev/master-detail-layout.html

@@ -33,7 +33,6 @@
 
       .master {
         box-sizing: border-box;
-        height: 100%;
         padding: 1.5rem;
         overflow: auto;
       }
@@ -62,7 +61,6 @@
 
       .static-detail {
         box-sizing: border-box;
-        height: 100%;
         padding: 1.5rem;
         overflow: auto;
       }

packages/master-detail-layout/ARCHITECTURE.md

@@ -38,6 +38,10 @@ In vertical mode, `grid-template-rows` replaces `grid-template-columns` using th
 
 `--_master-size` and `--_detail-size` default to `30em` and `15em` respectively in `:host`. When `masterSize`/`detailSize` properties are set, JS overrides these CSS custom properties. When cleared, JS removes the inline style and the defaults apply again.
 
+## Slotted Content Stretching
+
+`::slotted(*) { height: 100% }` makes all slotted content stretch to fill the cross-axis by default. In horizontal mode, children fill the full height; in vertical mode, block elements already fill width naturally. This low-specificity rule is easily overridden by explicit height on slotted elements.
+
 ## Overflow Detection
 
 `__checkOverflow()` reads the first 3 of the 4 computed track sizes: `[masterSize, masterExtra, detailSize]`. The 4th (detail extra) is 0 in overflow scenarios.

packages/master-detail-layout/src/styles/vaadin-master-detail-layout-base-styles.js

@@ -37,6 +37,10 @@ export const masterDetailLayoutStyles = css`
     box-sizing: border-box;
   }
 
+  ::slotted(*) {
+    height: 100%;
+  }
+
   [part~='master'] {
     grid-column: master-start / detail-start;
   }

packages/master-detail-layout/test/master-detail-layout.test.js

@@ -114,8 +114,10 @@ describe('vaadin-master-detail-layout', () => {
     });
 
     it('should trigger observer when a direct child is resized', async () => {
+      let height = 100;
       for (const child of layout.children) {
-        child.style.height = '100px';
+        child.style.height = `${height}px`;
+        height += 100;
         await onceResized(layout);
         expect(onResizeSpy).to.be.called;
         onResizeSpy.resetHistory();
@@ -152,5 +154,16 @@ describe('vaadin-master-detail-layout', () => {
       expect(parseFloat(getComputedStyle(master).height)).to.equal(500);
       expect(parseFloat(getComputedStyle(detail).height)).to.equal(500);
     });
+
+    it('should stretch slotted content to full height', async () => {
+      layout.masterSize = '200px';
+      layout.detailSize = '200px';
+      layout.parentElement.style.height = '500px';
+      await onceResized(layout);
+      const masterContent = layout.querySelector(':not([slot])');
+      const detailContent = layout.querySelector('[slot="detail"]');
+      expect(masterContent.offsetHeight).to.equal(500);
+      expect(detailContent.offsetHeight).to.equal(500);
+    });
   });
 });