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

This reverts commit 7735cf2.

Author: web-padawan

dev/master-detail-layout.html

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

packages/master-detail-layout/ARCHITECTURE.md

@@ -38,10 +38,6 @@ 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,10 +37,6 @@ 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,10 +114,8 @@ 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 = `${height}px`;
-        height += 100;
+        child.style.height = '100px';
         await onceResized(layout);
         expect(onResizeSpy).to.be.called;
         onResizeSpy.resetHistory();
@@ -154,16 +152,5 @@ 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);
-    });
   });
 });