Overflow auto not working with position absolute

Question

In the below code,

1. I have a parent div (.parent) and three child divs(.child1, .child2 , .child3).
2. .child1 has a button clicking on which a table is displayed.

Requirement -

1. .child2 should overlap .child3
2. .child2 should be horizontally scrollable

Issue -

setting overflow-x with position absolute is not working.

How to make this table scrollable as well as make it overlap all the divs that are below it ?

Attempt -

$('#expand').click(function(){
    $('.child2').toggle()
});

.child2{
    /* position: absolute;
    z-index: 2; */
    overflow-x: auto;
}

.child3 {
    position: absolute;
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="parent">
    <div class="child1" style="background-color: aqua; width: 50%;">
        <button id="expand">EXPAND</button>
    </div>
    <div class="child2" style="display: none;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>MarkMarkMarkMarkMarkMarkMark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="child3" style="background-color: coral; width: 50%;">
        CHILD3
    </div>
</div>

Answer 1

overflow-x does not work unless you have a width, for some reason. If the element is not absolutely positioned, the default is that the width is auto, however, when it is absolutely positioned, it messes up slightly and it takes up all the width it needs, no questions asked.

So you can sort this out by adding width: 100% to your .child2

$('#expand').click(function(){
    $('.child2').toggle()
});

.child2{
    position: absolute;
    z-index: 2;
    overflow-x: auto;
    width: 100%;
}

.child3 {
    position: absolute;
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="parent">
    <div class="child1" style="background-color: aqua; width: 50%;">
        <button id="expand">EXPAND</button>
    </div>
    <div class="child2" style="display: none;">
        <table class="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th scope="col">First</th>
                    <th scope="col">Last</th>
                    <th scope="col">Handle</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>MarkMarkMarkMarkMarkMarkMark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="child3" style="background-color: coral; width: 50%;">
        CHILD3
    </div>
</div>