add fallback

core/src/components/popover/popover.scss

@@ -101,8 +101,6 @@
   display: flex;
 
   flex-direction: column;
-
-  overflow: hidden;
 }
 
 // Nested Popovers

core/src/css/core.scss

@@ -375,3 +375,27 @@ ion-input input::-webkit-date-and-time-value {
   width: 320px;
   min-height: 320px;
 }
+
+/**
+ * If a popover has a child ion-content (or class equivalent) then the .popover-viewport element
+ * should not be scrollable to ensure the inner content does scroll. However, if the popover
+ * does not have a child ion-content (or class equivalent) then the .popover-viewport element
+ * should remain scrollable.
+ */
+.popover-viewport:has(> ion-content),
+.popover-viewport:has(> .ion-content-scroll-host) {
+  overflow: hidden;
+}
+
+/**
+ * :has has cross-browser support, but it is still relatively new. As a result,
+ * we should fallback to the old behavior for environments that do not support :has.
+ * Developers can explicitly enable this behavior by setting overflow: visible
+ * on .popover-viewport if they know they are not going to use an ion-content.
+ * TODO FW-XXXX Remove this
+ */
+@supports not selector(:has(> ion-content)) {
+  .popover-viewport {
+    overflow: hidden;
+  }
+}