`size` with `flip` for dynamic content: placement is sometimes incorrect

[eternalthinker]

Discussed in https://github.com/floating-ui/floating-ui/discussions/2953

^{Originally posted by eternalthinker June 28, 2024} I'm using the size middleware with flip, as described here: https://floating-ui.com/docs/size#using-with-flip

Depending on interactions within the content, my floating content can sometimes change in height. When height increases dynamically, sometimes flip doesn't seem to recognize that there is more space left on the other side (best fit), and sometimes it does. Is there a pattern to this and a way to avoid it, or is this random due to a race condition?

Demo: https://codepen.io/eternalthinkerr/pen/XWwQqyb

https://github.com/floating-ui/floating-ui/assets/2195458/8ec804dc-e82e-4b79-8626-8f62989433d3

[atomiks]

This is a consequence of the max-height style from the initial placement (where it fully fit) being left on the floating element.

By removing the style when it fits inside size's apply function, it ensures it is fully expanded for flip() to know it doesn't fit on the bottom side after it's been mounted for the first time:

if (availableHeight >= elements.floating.scrollHeight) {
  elements.floating.style.maxHeight = '';
} else {
  elements.floating.style.maxHeight = `${availableHeight}px`;
}

[atomiks]

https://github.com/floating-ui/floating-ui/commit/805d4077f70a0573bb33c596b7a20f513848f29f