Fix anchored elements not flipping when there is padding (#3157)

* Fix anchored elements not flipping when there is padding

* Update changelog

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
 

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)`,
           })
         },
       }),