fix(material/datepicker): prevent touch UI overflow

src/material/datepicker/datepicker-content.scss

@@ -124,10 +124,11 @@ $touch-max-height: 788px;
   }
 
   .mat-datepicker-content-container {
-    min-height: $touch-min-height;
-    max-height: $touch-max-height;
+    min-height: min(#{$touch-min-height}, 80vh);
+    max-height: min(#{$touch-max-height}, 80vh);
     min-width: $touch-min-width;
     max-width: $touch-max-width;
+    overflow: auto;
   }
 
   .mat-calendar {
@@ -150,12 +151,12 @@ $touch-max-height: 788px;
 @media all and (orientation: portrait) {
   .mat-datepicker-content-touch .mat-datepicker-content-container {
     width: $touch-portrait-width;
-    height: $touch-portrait-height;
+    height: min(#{$touch-portrait-height}, 80vh);
   }
 
   // The content needs to be a bit taller when actions have
   // been projected so that it doesn't have to scroll.
   .mat-datepicker-content-touch .mat-datepicker-content-container-with-actions {
-    height: $touch-portrait-height-with-actions;
+    height: min(#{$touch-portrait-height-with-actions}, 80vh);
   }
 }

src/material/datepicker/datepicker.spec.ts

@@ -1152,6 +1152,25 @@ describe('MatDatepicker', () => {
         expect(document.querySelector('.mat-datepicker-dialog')).not.toBeNull();
       });
 
+      it('should keep the touch calendar container scrollable within the dialog', () => {
+        testComponent.touch = true;
+        fixture.changeDetectorRef.markForCheck();
+        fixture.detectChanges();
+
+        testComponent.datepicker.open();
+        fixture.detectChanges();
+
+        const content = document.querySelector('.mat-datepicker-content')!;
+        const container = content.querySelector('.mat-datepicker-content-container')!;
+        const contentStyle = getComputedStyle(content);
+        const containerStyle = getComputedStyle(container);
+
+        expect(content.classList).toContain('mat-datepicker-content-touch');
+        expect(contentStyle.maxHeight).not.toBe('none');
+        expect(containerStyle.maxHeight).not.toBe('none');
+        expect(containerStyle.overflowY).toBe('auto');
+      });
+
       it('should not open calendar when toggle clicked if datepicker is disabled', () => {
         testComponent.datepicker.disabled = true;
         fixture.changeDetectorRef.markForCheck();