diff --git a/packages/@headlessui-react/CHANGELOG.md b/packages/@headlessui-react/CHANGELOG.md
index 68ca3441ff..3f59a01299 100644
--- a/packages/@headlessui-react/CHANGELOG.md
+++ b/packages/@headlessui-react/CHANGELOG.md
@@ -30,6 +30,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Ensure `TransitionRoot` component without props transitions correctly ([#3147](https://github.com/tailwindlabs/headlessui/pull/3147))
 - Ensure the `static` and `portal` props work nicely together ([#3152](https://github.com/tailwindlabs/headlessui/pull/3152))
 - Only check for elements in `useInertOthers` ([#3154](https://github.com/tailwindlabs/headlessui/pull/3154))
+- Fix anchored elements not flipping when there is padding ([#3157](https://github.com/tailwindlabs/headlessui/pull/3157))
 
 ### Changed
 
diff --git a/packages/@headlessui-react/src/internal/floating.tsx b/packages/@headlessui-react/src/internal/floating.tsx
index 9dfa654f8c..6baaa432df 100644
--- a/packages/@headlessui-react/src/internal/floating.tsx
+++ b/packages/@headlessui-react/src/internal/floating.tsx
@@ -234,7 +234,7 @@ export function FloatingProvider({
       // The `flip` middleware will swap the `placement` of the panel if there is not enough room.
       // This is not compatible with the `inner` middleware (which is only enabled when `to` is set
       // to "selection").
-      to !== 'selection' && flipMiddleware(),
+      to !== 'selection' && flipMiddleware({ padding }),
 
       // The `inner` middleware will ensure the panel is always fully visible on screen and
       // positioned on top of the reference and moved to the currently selected item.
@@ -312,11 +312,12 @@ export function FloatingProvider({
       // The `size` middleware will ensure the panel is never bigger than the viewport minus the
       // provided `padding` that we want.
       sizeMiddleware({
+        padding,
         apply({ availableWidth, availableHeight, elements }) {
           Object.assign(elements.floating.style, {
             overflow: 'auto',
-            maxWidth: `${availableWidth - padding}px`,
-            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight - padding}px)`,
+            maxWidth: `${availableWidth}px`,
+            maxHeight: `min(var(--anchor-max-height, 100vh), ${availableHeight}px)`,
           })
         },
       }),