html - Absolute positioned element creating overflow on it's scrollable container

Question

I've a long table that needs horizantal scroll. On it's last column I've buttons that show absolute positioned tooltips on hover. When the table itself doesn't initially create scrollbar, hovering the button, and showing it's tooltip, does.

<div style="width: 400px; height: 200px; border: 1px solid red; padding: 20px; overflow-x: auto">
        <div style="background-color: red; width: 100%; height: 100%; position: relative">
            My table that needs a scrolling parent div, but often times fits into the screen while it's buttons are not on hover
            <div style="position: absolute; width: 100px; height: 100px; background-color: green; top: 50px; left: 350px">
                My table button's tooltip that appear on hover.
            </div>
        </div>
    </div>

question from:https://stackoverflow.com/questions/65930656/absolute-positioned-element-creating-overflow-on-its-scrollable-container

Answer 1

Remove left: 350px; and add right: 0;