diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md
index 9f5aa704e..f18a7d9f4 100644
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -473,12 +473,15 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
 When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view and visually connected to its anchor.
 To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
 
+By default, flip takes effect when the popup would overflow the viewport.
+You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
+
 Scroll the container to see how the popup flips to prevent clipping.
 
 ```html {.example}
 <div class="popup-flip">
   <div class="overflow">
-    <wa-popup placement="top" flip active>
+    <wa-popup placement="top" flip active boundary="scroll">
       <span slot="anchor"></span>
       <div class="box"></div>
     </wa-popup>
diff --git a/src/components/popup/popup.ts b/src/components/popup/popup.ts
index a8720f1db..26760f36d 100644
--- a/src/components/popup/popup.ts
+++ b/src/components/popup/popup.ts
@@ -347,25 +347,21 @@ export default class WaPopup extends WebAwesomeElement {
       this.popup.style.height = '';
     }
 
-    let overflowBoundary, defaultBoundary;
+    let defaultBoundary;
 
-    if (SUPPORTS_POPOVER && !isVirtualElement(this.anchor)) {
+    if (SUPPORTS_POPOVER && !isVirtualElement(this.anchor) && this.boundary === 'scroll') {
       // When using the Popover API, the floating element is no longer in the same DOM context
       // as the overflow ancestors so Floating-UI can't find them.
       // For flip, `elementContext: 'reference'` gets it to use the anchor element instead,
       // but the option is not available for shift() or size(), so we basically need to implement it ourselves.
-      overflowBoundary = getOverflowAncestors(this.anchorEl as Element).filter(el => el instanceof Element);
-    }
-
-    if (this.boundary === 'scroll') {
-      defaultBoundary = overflowBoundary;
+      defaultBoundary = getOverflowAncestors(this.anchorEl as Element).filter(el => el instanceof Element);
     }
 
     // Then we flip
     if (this.flip) {
       middleware.push(
         flip({
-          boundary: this.flipBoundary || overflowBoundary,
+          boundary: this.flipBoundary || defaultBoundary,
           // @ts-expect-error - We're converting a string attribute to an array here
           fallbackPlacements: this.flipFallbackPlacements,
           fallbackStrategy: this.flipFallbackStrategy === 'best-fit' ? 'bestFit' : 'initialPlacement',