flip with `boundary` gets clipped when it can't fit within `rootBoundary`

Author: smhigleyCreated Aug 20, 2024Updated Jan 4, 2026

Describe the bug

A floating element with flip({ boundary: document.body, roootBoundary: 'viewport' }) is ending up positioned so it is clipped by the document (or any other custom clipping boundary) when it cannot fit within the viewport.

To Reproduce Codesandbox link

The codesandbox shows two examples -- one where the clipping ancestor is document.body, and one within a custom scroll region.

For the one within a scroll region, it is positioned above the trigger and clipped by the scroll boundary when scrolled all the way to the top.

For the one where the clipping boundary is document.body, to repro do the following:

  • Set the viewport height to 225px or less
  • scroll all the way to the top
  • the floating element is clipped by the document:
Screenshot of a button with a block of white text against a black background above it. The text is cut off at the top.

Expected behavior

Ideally I'd like the floating element to position itself to the best fit based on the viewport, unless that position causes it to be clipped by the document. From the docs, I thought boundary would do that, but please let me know if I'm misunderstanding what that prop is intended to do.

(the same behavior also occurs with autoPlacement, I just happen to be using flip)

Context:

  • OS: macOS 14.6
  • Browser Chrome, Edge, Firefox, Safari (same behavior on all 4)