Cant make a popup window to have visible overflow inside a scrollable area

Question

I have some chat container that becomes scrollable at some point. In this container some text is clickable that pops a window on top of it when clicked. The thing is that the popup window is being cut when reaching the top boundaries of my chat container. How can I make the popup overlap the container, so that it is visible no matter what?

My structure is like this :

<section id="main_cont">
    <section id="chat_cont">
        <div class="popup_container">
            <span class="popup_text"></span>
        </div>
    </section>
</section>

#main_cont{
    position: relative;
    overflow: hidden;
}

#chat_cont{  /*scrollable area*/
    position: absolute;
    overflow-y: auto;
}
.popup_container {
    position: relative;
    display: inline-block;
}

.popup_container .popuptext {
    position: absolute;
    overflow: visible;
}

I tried adjusting the z-index (setting popup's z-index higher than the cointainers) but it didnt work either. The position of the popup is already set to absolute.