diff --git a/src/material/datepicker/datepicker-content.html b/src/material/datepicker/datepicker-content.html
index 97109f1f59df..182377885cf7 100644
--- a/src/material/datepicker/datepicker-content.html
+++ b/src/material/datepicker/datepicker-content.html
@@ -1,6 +1,7 @@
 <div
   cdkTrapFocus
   class="mat-datepicker-content-container"
+  [class.mat-datepicker-content-container-with-custom-header]="datepicker.calendarHeaderComponent"
   [class.mat-datepicker-content-container-with-actions]="_actionsPortal">
   <mat-calendar
     [id]="datepicker.id"
diff --git a/src/material/datepicker/datepicker-content.scss b/src/material/datepicker/datepicker-content.scss
index 4ffd85714503..cd93bd44a7e9 100644
--- a/src/material/datepicker/datepicker-content.scss
+++ b/src/material/datepicker/datepicker-content.scss
@@ -31,6 +31,13 @@ $touch-max-height: 788px;
     height: $non-touch-calendar-height;
   }
 
+  // Override mat-calendar's height when custom header is provided
+  // Height should be auto, when the custom header is provided.
+  // This will prevent the content from overflowing.
+  .mat-datepicker-content-container-with-custom-header .mat-calendar {
+    height: auto;
+  }
+
   // Note that this selector doesn't technically have to be nested, but we want the slightly
   // higher specificity, or it can be overridden based on the CSS insertion order (see #21043).
   .mat-datepicker-close-button {