Div over another div with overflow

Question

I want to display some kind of tooltip on the left side of the long div(vertical). And if I set the parend div css to overflow-y:auto; then the child div is not displayed. Here is a fiddle of the problem https://jsfiddle.net/wrwvc6Lc/2/ try to remove the overflow-y:auto; prop and everything is fine. Is there a way to do so, as I need the overflow prop.

#infoBox {
  z-index: 1200;
  width:160px;
  height:90%;
  position: absolute;
  top: 10px;
  right: 10px;
     
	  background-color:white;
    overflow-y:auto; /* REMOVE THIS */
    border:1px solid red
    }

<div id="infoBox">
Lorem Ipsum is simply dummy text.
Lorem Ipsum is simply dummy text.
<div style="position:absolute; border:1px solid green; left:-90px; height:50px;width:100px;background-color:red">
Tooltip
</div>
</div>

UPD: I want that tooltip to be relative to the content inside the main infoBox div (3-4 text block with tooltip), so placing that tooltip out of the infobox is not ok.

Answer 1

The thing you're trying to do here is not possible (correct me if I'm wrong). Because overflow: auto; is required to set the scrollbars. But overflow also has an other property that every element inside the div with overflow: auto; can't go outside this element and will be cut off from this element which is intended.

Your concept can only work if you're not working with the overflow: auto; and you can't use scrollbars for this reason unfortunately.