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>

_"The position absolute should not affect the overflow."_ ... what makes you say that? — zgood, Dec 16 '20 at 18:12
Guess I didn't realize absolutely positioned elements played into the overflow calculation — koga73, Dec 16 '20 at 18:42
ya I think it is confusing, but you can checkout this [SO post](https://stackoverflow.com/questions/36531708/why-does-position-absolute-make-page-to-overflow) which has some decent answers. One explains it like this: _"So, when you add an absolutely positioned element, even though it does not increase the width of its containing block, it increases the size of the canvas. The browser then offers a scrolling mechanism to allow you to view the entire canvas."_ This is also why `overflow:hidden` will hide absolute positioned elements outside of its containers viewable area — zgood, Dec 16 '20 at 19:12
It is true the absolutly positioned elements are out of the flow of the document - which means they don't affect the position of siblings and height/width of parents. But they still represent content in the DOM, which is affected by overflow settings of a parent container — zgood, Dec 16 '20 at 19:20

score 2 · Answer 1 · answered Dec 16 '20 at 18:04

2

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.

answered Dec 16 '20 at 18:04

FilipA

526
3
10

CSS: Table overflow issue with position absolute

1 Answers1