How to completely disable vertical shrinking of a div element

I have a div on my website that I would like to remain the viewport height until the div gets small enough to where the children elements begin colliding (or a little before). I've tried min-height and display:table; yet none of it works. Here's how it's supposed to look:

However, on vertically smaller screens it looks like this:

Code snippet attached:

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100%;
  color: white;
  position: absolute;
  top: 0px;
  width: 100%;
  padding: 0 auto;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  position: absolute;
  top: 40%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
    position: relative;
    top: 83vh;
    text-align: center;
    background-image: url("img_5.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    width: 100%;
    min-height: 105%;
    padding: 20px;
    padding-right: 20px;
    clear: both;
    overflow: hidden;
}

.info-content-blocks {
    background-color: rgba(204, 204, 204, 0.8);
    padding: 30px; 
    margin: 15px;
}

.diveder {
width: 100%;
min-height: 100px;
background-color: rgba(204, 204, 204, 0.8);
padding-top: 2%;
padding-bottom: 1%;
}

<div class="welcome">
    <div class="welcome-content">
        <h1 class="welcome-txt">Classes<br>
            The Coders Club</h1>
        <img src="/resources/Copy of The Coders Club.png" class="logo">
        <p class="tagline">Learn. Code. Create.</p>
        <div class="arrow-background">
            <div class="arrow bounce"></div>
        </div>
    </div>  
</div>
 <div class="space"></div>   
<div class="info-content">
   <div class="diveder" style="color: red;"><h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p></div>
    <div class="info-content-blocks" id="classes">
    
    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>
    
    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
</div>

Solution

If I understand your question correctly, this might be what you wanna do. First is to add min-height: 100vh to .welcome, then instead of using absolute positioning on the texts, we can use flexbox model to its parent .welcome.

* {
  margin: 0;
}

body {
  overflow-x: hidden;
  font-size: large;
  margin: 0;
}

.welcome {
  text-align: center;
  background-image: url("https://images.unsplash.com/photo-1587831990711-23ca6441447b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8ZGVza3RvcCUyMGNvbXB1dGVyfGVufDB8fDB8fA%3D%3D&auto=format&fit=crop&w=500&q=60");
  background-size: cover;
  background-repeat: no-repeat;
  min-height: 100vh;
  color: white;
  top: 0px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome * {
  clear: both;
}

.welcome-txt {
  white-space: nowrap;
}

.welcome-content {
  animation-name: fadeInLoad;
  animation-duration: 3s;
  animation-timing-function: linear;
  padding: 40px 0;
}

#child {
  position: absolute;
  top: 0;
  color: black;
  display: inline-block;
}

.info-content {
  position: relative;
  text-align: center;
  background-image: url("img_5.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  min-height: 105%;
  padding: 20px;
  padding-right: 20px;
  clear: both;
  overflow: hidden;
}

.info-content-blocks {
  background-color: rgba(204, 204, 204, 0.8);
  padding: 30px;
  margin: 15px;
}

.diveder {
  width: 100%;
  min-height: 100px;
  background-color: rgba(204, 204, 204, 0.8);
  padding-top: 2%;
  padding-bottom: 1%;
}

<div class="welcome">
  <div class="welcome-content">
    <h1 class="welcome-txt">Classes<br> The Coders Club</h1>
    <img src="/resources/Copy of The Coders Club.png" class="logo">
    <p class="tagline">Learn. Code. Create.</p>
    <div class="arrow-background">
      <div class="arrow bounce"></div>
    </div>
  </div>
</div>
<div class="space"></div>
<div class="info-content">
  <div class="diveder" style="color: red;">
    <h2>Class Starts February 10</h2>
    <p>Signup by January 20th</p>
  </div>
  <div class="info-content-blocks" id="classes">

    <h3>What Will Be Taught?</h3>
    <h4><b>Beginner Class</b></h4>
    <p>In the beginner class students will be taught the basics of HTML (Hyper Text Markup Language), CSS (Cascading Style Sheets). Students will be able to make websites like the one you are one now.</p>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
    <button class="standard-button">Enroll</button>

    <h4>Intermediate Class Part 1 (New!)</h4>
    <p>In the Intermediate part 1 class students will learn the basics of JS. IE: variables, function, if/else statements, object, object oriented programing. Note: The HTML and CSS is not required for the intermediate class.</p>
    <button class="standard-button">Enroll</button><br><br>
    <button class="standard-button"><a href="/curriculem-beginer.html">View curriculum</a></button><br><br>
  </div>

The key here is to actually not use the position absolute and use the flexbox model instead though, so that it's treated as having its own height.