Expanding flexbox containers not pushing down divs below - html

Question

I have a few elements which will contain a fixed size image and some text of variable length below, one nasty behaviour I noticed when texts are larger than the text container height where the div element grows but doesn't push down elements displayed below (Body has flex display with direction column) so that would be the preferable outcome right?
This is what I'm talking about: https://imgur.com/a/MjwOxXX
Notice how the upper section is taking space from the lower section by overlapping over it instead of the whole container growing and pushing down the lower section.
This is my code:
body{display:flex; flex-direction:column; height:auto; font-family:Roboto Slab; position:relative; scroll-bahaviour:smooth;}
*{box-sizing:border-box; margin:0; padding:0;}
a{text-decoration:none;}
.squared_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}
.squared_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}
.squared_contents_container{width:100%; height:auto; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap;}
.squared_content_container{width:32%; height:auto; display:flex; flex-direction:column; margin:10px 0px;}
.squared_content_image{width:100%; height:260px; outline:1px solid rgba(0, 0, 0, 0.3); background-repeat:no-repeat; background-size:cover;}
.squared_content_texts_container{width:100%; height:145px; display:flex; flex-direction:column; padding:10px; position:relative;}
.squared_content_texts_title{ width:100%; font-weight:500; font-size:17px; color:var(--main_color); margin-bottom:10px;}
.squared_content_texts_description{width:100%; height:auto; font-weight:500; oveflow:hidden; font-size:14px; color:rgba(0, 0, 0, 0.9); margin-bottom:10px;}
.squared_content_texts_link{width:100%; font-size:14px; color:var(--main_color); font-weight:400; text-align:right; marin-top:auto;}
.menu_maincontainer{width:100%; height:auto; display:flex; flex-direction:column;}
.menu_title{width:100%; height:100px; display:flex; justify-content:center; align-items:center; font-size:37px; font-weight:500; color:rgba(0,0,0,0.8);}
.menu_contents_container{width:100%; height:auto; display:flex; justify-content:space-around; flex-wrap:wrap;}
.menu_content_image_container{width:32%; height:280px; box-shadow:3px 3px 3px rgba(0,0,0,0.1); background-size:cover; position:relative; }
.menu_content_texts_container{width:100%; height:auto; position:absolute; bottom:0px; left:0px; background-color:rgba(0,0,0,0.7); display:flex; flex-direction:column; padding:10px;}
.menu_content_texts_title{font-size:18px; font-weight:400; color:var(--main_color);}
.menu_content_texts_description{font-size:15px; font-weight:400; color:white;}
<div class="squared_maincontainer push" style="">
<span class="squared_title" style="">Eventos</span>
<div class="squared_contents_container" style="">
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs22.jpg');"></div>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs12.jpg');"></div>
<div class="squared_content_texts_container" style=" ">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
<a href="" class="squared_content_container" style="">
<div class="squared_content_image" style="background-image:url('img/dogs2.jpg');"></div>
<div class="squared_content_texts_container" style="">
<span class="squared_content_texts_title" style="">When our dog is afraid of men</span>
<span class="squared_content_texts_description" style="">One common dog fear is that of men — but is it normal and can it be fixed? We look at the causes and solutions for when Man’s Best Friend doesn’t live up to...</span>
<span class="squared_content_texts_link" style="">Read More</span>
</div>
</a>
</div>
</div>
<div class="menu_maincontainer push" style="">
<a class="menu_title" href="" style="">Título de sección</a>
<div class="menu_contents_container" style="">
<div class="menu_content_image_container" style="background-image:url('img/dogs32.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
<div class="menu_content_image_container" style="background-image:url('img/dogs30.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
<div class="menu_content_image_container" style="background-image:url('img/dogs22.jpg');">
<div class="menu_content_texts_container" style="">
<a class="menu_content_texts_title" href="" style="">Titulo</a>
<a class="menu_content_texts_description" href="" style="">Descripción del titulo</a>
</div>
</div>
</div>
</div>

Answer 1

I have reviewed your code and I noticed the .squared_content_texts_container class fixes the description text height to 145px. This is why when the height of the first box grew it didn't adjust the height of the parent div.
Try removing the 145px height from the .squared_content_texts_container class, or setting the min-height to 145px instead.
Then, the three flex boxes will vertically align in the middle but if you want them to be top-aligned, you must use the align-self: flex-start; styling on the .squared_content_container class.
Please see this jsFiddle with the result.
https://jsfiddle.net/katerynas/d3n5ksps/
.squared_content_texts_container{
width:100%;
min-height:145px;
display:flex;
flex-direction:column;
padding:10px;
position:relative;
}
.squared_content_container{
width:32%;
height:auto;
display:flex;
flex-direction:column;
margin:10px 0px;
align-self: flex-start;
}