How to prevent 'Elements from collapsing' when 'Vertical Viewport' becomes smaller? - html

Question

I am building a website layout as an exercise, using Flexbox. But elements collapse into each other when I put the website through responsive test.
Using Flexbox, I tried to build a responsive website, where it would self-adjust ratios when you play with the dimensions of the browser. The horizon test was a pass, but when I opened the inspect tools, the "vertical view port" became smaller and the blue 'Section' and the fuchsia 'Footer' all collapsed into each other, because the vertical aspect of the website is not working as expected.
I tried to change and play around with different size units such as {%, em, vh, vw} to get the elements to readjust their sizes in relation to each other, but it still collapses into each other when I
I uploaded the code: {HTML & CSS} to Codepen as well.
:root{
text-align: center;
}
body{
background-color: gray;
height: 100vh;
}
.container{
margin-left: 1em;
margin-right: 1em;
background-color: gray;
display: flex;
flex-direction: column;
}
.headerAndNav{
}
.header{
background-color: navajowhite;
border: 0.5em solid gray;
}
.nav{
background-color: powderblue;
border: 0.5em solid gray;
}
.sectionAndAside{
display: flex;
flex-direction: column;
align-items: stretch;
text-align: center;
}
.header{
height: 8vh;
}
.nav{
height: 8vh;
}
.middle{
display: flex;
flex-direction: row;
/* background-color: red; */
border: 0.5em solid gray;
height: 40vh;
}
.aside{
background-color: powderblue;
width: 50%;
margin: 0.5em 0 0.5em 0.5em;
}
.section{
color:red;
display: flex;
flex-direction: column;
background-color: blue;
width: 50%;
margin: 0.5em 0.5em 0.5em 0;
padding-top: 3em;
}
.article{
background-color: yellow;
height: 100vh;
margin: 10px;
}
h1{
background-color: bisque;
}
h2{
background-color:gold;
}
h3{
background-color: khaki;
}
.hClass{
background-color: gray;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: 10vh;
margin: 1em;
}
.p{
background-color: lightcoral;
height: 10vh;
margin: 1em;
}
.footer{
background-color: fuchsia;
border: 0.5em solid gray;
height: 10vh;
}
<div class='container'>
<div class='sectionAndAside'>
<div class='header'>header</div>
<div class='nav'> nav</div>
</div>
<div class='middle'>
<div class='section'>section
<div class='article'>article
<div class='conta'>
<div class='hClass'>
<h1>h1</h1>
<h2>h2</h2>
<h3>h3</h3>
</div>
<div class='p'>
<p>this is p</p>
</div>
</div>
</div>
</div>
<aside class='aside'>aside</aside>
</div>
<div class='footer'>footer</div>
</div>
I was hoping to find a way/solution/method-of-approach and learn how to how to effectively control the layout of a website when I build them from scratch. This image here (bottom), is exactly what I am trying to replicate. I eventually did, but it was not responsive. Initially I had trouble with controlling div s positions, but flexbox helped me with that. The objective now is to learn how to get the vertical properties of the elements to behave as well as the horizontal ones.

Answer 1

use property flex wrap :wrap; it helps in small screen.
https://scrimba.com/g/gflexbox