Why is my container height not fitting to content? - html

Question

I cannot figure out why my container (main-container) background is not stretching with the content inside. It looks like the container background is stuck on initial view height. When I scroll pass the initial view height, the rest of it is white.
Here is the css
.main-container {
margin: 0;
padding: 0;
font-family: 'montserrat';
height: fit-content;
}
.main {
position: absolute;
top: 65%;
left: 50%;
transform: translate(-50%, -50%);
width: 400px;
background: greenyellow;
border-radius: 10px;
margin-bottom: 40px;
padding-bottom: 20px;
}
<div class="main-container">
<div class="main">
<h1>Signup</h1>
<form method="POST">
<div class="txt-field">
<input type="text" required>
<span></span>
<label>First Name</label>
</div>
<h1>Upload Image</h1>
<button class="btn btn-primary">Upload<i class="fa fa-upload fa-1x"></i></button>
<input type="submit" value="Signup">
</form>
</div>
</div>
This is what it looks like initially.
This is what it looks like when I scroll down

Answer 1

The reason is that you have position: absolute on your .main class - any elements positioned absolutely will be taken out of the regular document flow and will have no effect on the layout of their parent(s).
It looks like you are using absolute position to try and center the .main element. Have you considered using a flexbox on .main-container instead? Using a flexbox with justify-content: center and align-items: center is an easy way to center an element inside its parent while keeping the regular document flow.