Problem with parent element overflow affecting the visibility of a child element with "position: Absolute"

Question

Ah, there are a few things in CSS that sometimes stress me out!

I have a parent element responsible for listing several items. And inside these items, when I pass the mouse on a given link, a dialog (or balloon) is shown that shows some information. And this balloon is with position: absolute, with the scenario very close to this:

    .pai {

        background-color: #ccc;
        overflow: auto;
        max-height: 300px;
    }

    .item {
        background-color: lightblue;
        height: 50px; 
        position: relative;
    }

    .item a{
        padding: 10px;
        display: inline-block;
        text-decoration: none;
        color: #049;
    }

    .dialogo {
        display: none;
    }

    .item a:hover+.dialogo {
        display: block;
        position: absolute;
        background-color: #fff;
        box-shadow: 0 2px 2px #ccc;
        padding: 15px;
        z-index: 1000
    }

<div class="pai">
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
    <div class="item">
        <a>passe o mouse aqui</a>
        <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
    </div>
</div>

Note that when passing the mouse over the .item a, the .dialogo appears cut, by overflow:scroll or overflow: hidden.

That is, it seems that the z-index combined with position: absolute have some kind of conflict, because even with the z-index, part of the dialogue is hidden.

Is there any way to make this boring in CSS?

There’s some way to fix it without me having to change everything I’ve ever done or by modifying as little as possible?

Observing: I would like to solve only with CSS, no Javascript, please.

Answer 1

The problem is that position: absolute; will not affect the height of the box-model of the parent element, the cut is by simply the element appear at the height limit, has nothing to solve in this, maybe the way would be to change the approach.

Just for the record z-index does not affect the element to leak out of the overflow, it is for you to control the positioning z of the elements, what you should do is define who will be the element relativo, thus the elements with absolute will work from it, to solve this create an element grandfather, a father and a grandson.

The grandfather element must be the overflow-free with position: relative; and its element .item also, the only one that can contain relative is the grandfather, so:

    .avo {
        position: relative;
    }

    .pai {
        background-color: #ccc;
        overflow: auto;
        max-height: 300px;
    }

    .item {
        background-color: lightblue;
        height: 50px;
    }

    .item a{
        padding: 10px;
        display: inline-block;
        text-decoration: none;
        color: #049;
    }

    .dialogo {
        display: none;
        position: absolute;
        background-color: #fff;
        box-shadow: 0 2px 2px #ccc;
        padding: 15px;
        z-index: 1000;
    }

    .item a:hover+.dialogo {
        display: block;
    }

<div class="avo">

    <div class="pai">
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
        <div class="item">
            <a>passe o mouse aqui</a>
            <div class="dialogo">Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde molestias vel ducimus, delectus recusandae veritatis asperiores reiciendis dicta a, voluptatibus quaerat quis in, sunt quas! Aspernatur dolore odit non illo!</div>
        </div>
    </div>

</div>

---

However there is still a problem in this whole approach, as it positions the scroll, or increases the content, the elements with position: absolute; will change places, so maybe the only approach to avoid all this is to do it dynamically with Javascript letting the popup/tooltip adjust based on the getBoundingClientRect() offsetting with the "parent" element the positions X and Y (and perhaps with the scrollTop also entering the mathematical operation to get the result)