CSS: Table overflow issue with position absolute

Question

I have a table wrapped in a div with overflow:auto so the table can scroll if it needs to. The issue is I have a "tooltip" inside a cell that is position:absolute and wider than the cell (overflowing) and it's causing the entire table to want to scroll. The position absolute should not affect the overflow. What's going on?

#wrap {
    max-width:100%;
    max-height:100%;
    overflow:auto;
}

table {
    border:1px solid black;
    border-collapse:collapse;
    width:100%;
}

td {
    position:relative;
    height:50px;
}

span {
    display:block;
    min-width:9999px;
    position:absolute;
    top:25px;
    left:0;
}

<div id="wrap">
    <table>
        <tr>
            <td>
                Regular content
                <span>Absolutly positioned</span>
            </td>
        </tr>
    </table>
</div>

Answer 1

I would change this code a little bit and add one more <div>.

Make outer <div> to position: relative and create inner <div> with position: absolute. It should work for you.