diff --git a/src/components/date-range-picker.ts b/src/components/date-range-picker.ts
index b60ce14763..5732de5fc6 100644
--- a/src/components/date-range-picker.ts
+++ b/src/components/date-range-picker.ts
@@ -145,6 +145,8 @@ class DateRangePickerElement extends WrappedElement {
             );
             color: var(--primary-text-color);
             min-width: initial !important;
+            max-height: var(--date-range-picker-max-height);
+            overflow-y: auto;
           }
           .daterangepicker:before {
             display: none;
diff --git a/src/panels/energy/ha-panel-energy.ts b/src/panels/energy/ha-panel-energy.ts
index 2c0bcf146c..26cdc94284 100644
--- a/src/panels/energy/ha-panel-energy.ts
+++ b/src/panels/energy/ha-panel-energy.ts
@@ -141,6 +141,7 @@ class PanelEnergy extends LitElement {
           padding-inline-start: 32px;
           --disabled-text-color: rgba(var(--rgb-text-primary-color), 0.5);
           direction: var(--direction);
+          --date-range-picker-max-height: calc(100vh - 80px);
         }
         :host([narrow]) hui-energy-period-selector {
           padding-left: 0px;