diff --git a/src/material/autocomplete/autocomplete.scss b/src/material/autocomplete/autocomplete.scss
index 5bbcbe84ab80..df5dc9bafe9d 100644
--- a/src/material/autocomplete/autocomplete.scss
+++ b/src/material/autocomplete/autocomplete.scss
@@ -17,8 +17,9 @@ div.mat-mdc-autocomplete-panel {
   padding: 8px 0;
   box-sizing: border-box;
 
-  // Workaround in case other MDC menu surface styles bleed in.
-  position: static;
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
 
   @include token-utils.use-tokens($token-prefix, $token-slots) {
     border-radius: token-utils.slot(container-shape);
diff --git a/src/material/select/select.scss b/src/material/select/select.scss
index 68d57248a191..b4128c814673 100644
--- a/src/material/select/select.scss
+++ b/src/material/select/select.scss
@@ -164,8 +164,9 @@ div.mat-mdc-select-panel {
   border-radius: 4px;
   box-sizing: border-box;
 
-  // Workaround in case other MDC menu surface styles bleed in.
-  position: static;
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
 
   @include token-utils.use-tokens($token-prefix, $token-slots) {
     background-color: token-utils.slot(panel-background-color);
@@ -186,10 +187,6 @@ div.mat-mdc-select-panel {
     border-bottom-right-radius: 0;
     transform-origin: bottom center;
   }
-
-  .mat-mdc-option {
-    --mat-list-list-item-container-color: var(--mat-select-panel-background-color);
-  }
 }
 
 .mat-select-panel-animations-enabled {
diff --git a/src/material/timepicker/timepicker.scss b/src/material/timepicker/timepicker.scss
index b7386d88b733..e81e5ea23bc8 100644
--- a/src/material/timepicker/timepicker.scss
+++ b/src/material/timepicker/timepicker.scss
@@ -36,6 +36,10 @@ mat-timepicker {
   padding: 8px 0;
   box-sizing: border-box;
 
+  // Necessary so the `offsetParent` of the nested `mat-option` is the
+  // panel which is required for scroll calculations (see #30974).
+  position: relative;
+
   @include token-utils.use-tokens(m2-timepicker.$prefix, m2-timepicker.get-token-slots()) {
     border-bottom-left-radius: token-utils.slot(container-shape);
     border-bottom-right-radius: token-utils.slot(container-shape);