У меня есть div с вкладками, каждая вкладка отображает различный контент. У одной из этих вкладок таблица больше размера экрана, после того как я ее открою, div растягивается и переполняется сверху, из окна. У меня есть overflow:auto на родительском div, и div растягивается правильно, но часть дочернего div переполняется сверху.
При загрузке дочерний элемент div представляет собой небольшую рамку с центром в центре экрана, высота которого зависит от содержимого.
Я использую Bootstrap, чтобы помочь.
.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">Deconnecter</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">Annulation</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 'traitement.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>
И есть изображение, чтобы показать, что происходит.
