I have a section with tabs, each tab displaying different content. One of those tabs contains a table taller than the screen size. When I open it, the section stretches and overflows from the top, extending beyond the window. Despite having overflow:auto set on the parent container, the child element still overflows from the top.
Initially, the child div is a small box centered on the screen, with its height based on the content.
I am utilizing bootstrap for assistance.
.parent
{
background-image: url("images/CM3A2078.jpg");
background-position: 20%;
background-size: cover;
display: flex;
flex-direction: column;
padding: 0;
position: relative;
overflow: auto;
}
.child
{
position: absolute;
min-height: 250px;
background-color: rgba(255,255,255,0.6);
border-style: solid;
border-color: #FF6400;
border-radius: 25px;
transform: translate(0, -50%);
padding: 20px;
margin-left: 25px;
margin-right: 25px;
top: 50%;
width: calc(100% - 50px);
min-width: calc(100% - 50px);
}
.h-full
{
min-height: 100vh;
}<body>
<div class="container-fluid h-100">
<div class="row h-full">
<div class="col-lg-2 col-md-2 col-sm-1 col-1 side h-full">
<div class="purple-gradient-left"></div>
</div>
<div class="col h-full parent">
<div class="child">
<div>
Some content
</div>
<div>
<br>
<div class="row">
<div class="col-2">
<button type="button" class="btn btn-primary btn-lg btn-disconnect">Disconnect</button>
</div>
<div class="col">
<ul class="nav nav-tabs tab-display justify-content-end" role="tablist">
<li class="nav-item ">
<a class="nav-link active" data-toggle="tab" href="#home">Administration</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu1">Reservation</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2">Cancellation</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div id="home" class="container tab-pane active"><br>
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="container tab-pane fade"><br>
<h3>Reservation</h3>
<?php include 'processing.php'; ReservationTable(); ?>
</div>
<div id="menu2" class="container tab-pane fade"><br>
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-2 col-md-2 col-sm-1 col-1 side h-full">
<div class="purple-gradient-right"></div>
</div>
</div>
</div>
</body>An image demonstrating the issue can be viewed https://i.sstatic.net/4gaGv.png.