When it comes to building a basic website, I am facing an issue where the parent div does not adjust to the content inside. Everything works fine when there is some content, but as soon as I set the child div to display: grid, the height of the parent div remains fixed at 100vh, even when the grid items overflow downwards. Below is the code snippet:
* {
padding: 0;
margin: 0;
}
.container {
min-height: 100vh;
height: auto;
display: flex;
flex-direction: column;
}
.one {
background: grey;
}
.title {
text-align: center;
background: turquoise;
flex: 0 1 auto;
}
.content {
flex: 1 1 auto;
background: red;
font-size: 5rem;
justify-content: center;
display: grid;
grid-template-columns: repeat(2, 40%);
grid-template-rows: repeat(4, 40%);
column-gap: 5rem;
row-gap: 5rem;
}
.content-object {
background: url("Project4.jpg");
background-position: center;
background-size: cover;
}<div class="container one">
<div class="title">
<h1>TEST</h1>
</div>
<div class="content">
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
<div class="content-object"></div>
</div>
</div>
<div class="container two">
</div>