Making element scroll-able is cutting off content

I am developing a web-application which frequently uses tooltips. The application is styled using the Bulma CSS library along with the Bulma Tooltip Extension. Some elements in my application have internal scrolling (with their overflow-y property set to 'scroll' or 'auto'). Setting overflow-y to 'scroll'/'auto' automatically sets overflow-x to 'hidden (this is inevitable according to other answers).

This is causing overhanging tooltips to be cut off, as can be seen in this sandbox:

While I understand that having a visible x overflow with a scroll-able y overflow is impossible, I imagine that there is some work around/solution that will allow at least allow for the appearance of displaying an overhanging tooltip in a scroll-able element. In my case, allowing for visible overhang on the x-axis is more important (no other question/answers address/resolve this exact issue).

Any help will be greatly appreciated.

#testDiv {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 75px;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button {
  margin: 10px;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div id="testDiv">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
    </div>
  </body>
</html>

Solution

You can create another div element (.wrapper) that will have default overflow settings. It will be a container for your #testDiv and .button.

Now, Add position: relative to .wrapper. .button now can be positioned absolutely, to just look like it's inside #testDiv element, but technically - it isn't :)

#testDiv element need to be expanded to 100% width and height, to inherit size from .wrapper

Last step - add some padding-top to #testDiv to prevent content overlap on .button element.

Look at code below:

.wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 75px;
}

#testDiv {
  height: 100%;
  width: 100%;
  padding-top: 50px;
  border: 1px solid black;
  overflow-y: auto; /* Delete Line to see full tooltip */
}

.button.tooltip {
  margin: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

<html>
  <head>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
    <link rel="stylesheet" href="https://wikiki.github.io/css/documentation.css?v=201904261505">
  </head>
  <body>
    <div class="wrapper">
      <button class="button tooltip" data-tooltip="This is a Tooltip">X</button>
      <div id="testDiv">
        content
      </div>
    </div>
  </body>
</html>

I hope this solution will suffice :)