I'm working on a one-page website using Bootstrap columns, but I've encountered an issue. When I shrink the screen, the content of a form that is positioned absolutely doesn't fully appear. How can I ensure that the second column adjusts its height to display all the content? I've tried using overflow: scroll and overflow: visible in the imageWrapper class, but it hasn't solved my problem. Here's the desired result I'm aiming for: result.
Here's the HTML and CSS code snippet:
.imageWrapper{
height: 100%;
width: 100%;
position: relative;
overflow: auto;
}
.formShape {
position: absolute;
height: 100%;
top: 0;
right: 0;
}
.form {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display:none;
margin-bottom:80px;
width:540px;
height:650px;
background:#fff;
border-radius:5px;
overflow:hidden;
z-index:1;
}<div class="container-fluid h-100">
<div class="row no-gutters h-100">
<div class="col-12 col-md-6 left">
Content 1
</div>
<div class="col-12 col-md-6">
<div class="imageWrapper">
<img class="homePhoto" src="images/img1">
<img class="formShape" src="images/img2">
<div class="form" id="formContainer">
<form>
...
</form>
</div>
</div>
</div>
</div>
</div>