Как полностью отключить вертикальное сжатие элемента div

Я наткнулся на полезную статью здесь, которая использует JS для создания минимальной ширины на <meta name='viewport' />, и если устройство меньше этой минимальной ширины, оно отображает более «уменьшенную» версию страницы.

Я считаю, что это решение решит вашу проблему столкновения элементов.

Репозиторий github с кодом

Просто установите родительский min-height на fit-content, тогда вам решать, хотите ли вы, чтобы overflow был scroll или hidden.

* {
    margin: 0;
    padding: 0;
  }

.parent {
    width: 100vw;
    height: 100vh;
    min-height: fit-content;
    display: flex;
    background: lightblue;
    /* overflow: hidden; */
}

.child {
    width: 50%;
    height: 100px;
    text-align: center;
    background: lightcoral;
    border: 1px solid lightgray;
}

.parent :nth-child(3) {
    height: 300px;
}

  

<div class = "parent">
  <div class = "child">child1</div>
  <div class = "child">child2</div>
  <div class = "child">child3</div>
</div>

Если я правильно понял ваш вопрос, это может быть то, что вы хотите сделать. Во-первых, нужно добавить min-height: 100vh к .welcome, затем вместо использования абсолютного позиционирования в текстах мы можем использовать модель flexbox для его родителя .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>

Ключевым моментом здесь является фактически не использовать абсолютную позицию и вместо этого использовать модель flexbox, чтобы она рассматривалась как имеющая свою собственную высоту.

я использую некоторые js для этого

<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script>

вы можете удалить минимальную высоту из .welcome, так как мы используем js даже с небольшим вертикальным экраном он будет работать отлично вот полный код

<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<style>
* {
  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;
 
  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%;
}
</style>
</head>
<body>

<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></div>
</body>
<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script></html>