Bubble toolbar is positioned poorly in a scroll container within a Flex layout

[jri]

I have a Quill instance inside a scroll container (overflow: auto). Sometimes the Bubble toolbar is positioned so that it is clipped because it exceeds the scroll container. The user has to scroll manually to bottom to make the toolbar fully visible. That's bad UX.

The screenshot shows an example of poor positioning: why places Quill the toolbar below the selection when above would be enough room?

I already use a bounds Element and it works as expected.

z-index would not help here. As the toolbar is a child element of the scroll container to my knowledge its impossible for the toolbar to escape the container.

So one approach would be to scroll automatically in case the toolbar is positioned poorly. Every time the toolbar becomes visible I would check if it is fully visible, and if not scroll the container accordingly. But how can I register an event handler that is fired every time the Bubble toolbar becomes visible?

Another approach would be to avoid poor toolbar positioning in the first place. But how?

[jri]

Reproduction link: https://codepen.io/jri/pen/GRgJpWd The scroll container is colored beige. The Quill instance has a lightgray border.

1. Make sure the preview area is high enough, so that there is some space below the "Save" button.
2. Do a selection in "Line 5".

You'll see a poorly positioned toolbar:

Only after scrolling down the toolbar becomes fully visible:

Note that this demo uses a Flex layout.

Here is a similar demo that also uses a scroll container, but no Flex layout: https://codepen.io/jri/pen/GRgJoqa

It works much better. So the Quill Bubble toolbar positioning problem is possibly related to Flex layout.