How to completely disable vertical shrinking of a div element - html

Question

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">View curriculum</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">View curriculum</button><br><br>
</div>

Answer 1

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">View curriculum</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">View curriculum</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.

Answer 2

I came across a useful article here that uses JS to create a min width on the <meta name='viewport' /> and if the device is smaller than that minimum width it renders a more "zoomed out" version of the page.
I believe this solution would fix your issue of the elements colliding.
The github repo with the code

Answer 3

Just set the parent's min-height to fit-content then it's up to your need if you want overflow to be scroll or 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>

Answer 4

i am using some js for this
<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script>
you can remove the min-height from .welcome as we are using js
even with a small vertical screen, it will work perfectly
here is the complete code
<!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">View curriculum</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">View curriculum</button><br><br>
</div></div>
</body>
<script>
let height = screen.height;
document.querySelector(".welcome").style.minHeight=height+"px";
</script></html>