Tooltip needs to be in overflow: auto container without being cut off [duplicate]

Question

I'm building a sort-of desktop app. The page itself must not be scrollable, but the different content parts within it do. Therefore, they have overflow: auto.

But now I need to show tooltips and they are cut off at the container edges because of that.

All answers to other questions about this that I found recommended to not clip the overflow (hidden, auto, scroll), but that's not an option for me unfortunately.

And since I can't be sure what height my container and my tooltip will have, because both get their data externally, I can't place the tooltip in the middle of it and be sure that it won't be cut off.

So I need a solution that doesn't cut off the tooltips.

Working example of my basic markup:

#flex {
  display: flex;
  flex-direction: column;
  height: 200px;
  width: 100%;
}
#box1,
#box2 {
  flex 1;
  overflow-y: auto; /* without overflow the tooltip would work, but I need overflow */
}
#box1 {
  background-color: lightgrey;
}
#box2 {
  background-color: lightblue;
}
span {
  position: relative;
  text-decoration: underline;
}
#tooltip {
  background-color: lightgreen;
  display: none;
  position: absolute;
  height: 100px;
  width: 200px;
  bottom: 0px;
}
span:hover #tooltip {
  display: block;
}

<div id="flex">
  <div id="box1">
    Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>
  </div>
  <div id="box2">
    Flex Content with <span>Tooltip
    <div id="tooltip">
    Tooltip text
    </div></span>
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>Flex Content
    <br>
  </div>
</div>

https://jsfiddle.net/dqrkkvkL/

Answer 1

Solution found here.

They just move the position: relative from the element that contains the tooltip to the container that surrounds the overflow element

https://jsfiddle.net/dqrkkvkL/1/