CSS - How to stretch div height from top to bottom of the page?

Question

everyone.

So I am using Next.Js to create my app, however I have arrived at a problem.

In the picture and snippet below you can see how the page behaves right now, what I want is I want the pageContent div to have its height cover the page from the top to the bottom.

This is my CSS:

html, body{
  height: 100%;
  min-height: 100%;
  background-color: rgb(22, 22, 22);
  font-weight: 300;
}


* {
  outline: none !important;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


#__next{
    height: 100%;

    display: flex;
    flex-direction: row;

    justify-content: center;
}

.pageContent{
    height: 100%;
    width: 80%;
    min-height: 100%;

    background-color: whitesmoke;
}

h1{
    color: rgb(221, 75, 31);
}

<div id="__next">
  <div class="pageContent">
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
    <h1>asda</h1><h1>asda</h1>
  </div>
</div>

Answer 1

You should first remove the height and min-height properties from the html and body elements, and then set the height and min-height properties of the #__next element to 100% and 100vh, respectively. You should also set the height and min-height properties of the .pageContent element to 100% and 100vh, respectively.

html, body{
  background-color: rgb(22, 22, 22);
  font-weight: 300;
}
#__next{
    height: 100%;
    min-height: 100vh;

    display: flex;
    flex-direction: row;

    justify-content: center;
}

.pageContent{
    height: 100%;
    min-height: 100vh;
    width: 80%;

    background-color: whitesmoke;
}