我有一些元素将包含一个固定大小的图像和下面一些可变长度的文本，当文本大于div 元素增长但不向下推下方显示的元素时，我注意到一个令人讨厌的行为(Body 具有带有方向列的柔性显示(，所以这将是更可取的结果，对吗？
这就是我要说的：https://i.stack.imgur.com/WO77e.jpg
请注意，上部如何通过重叠而不是整个容器增长并向下推下部来占用下半部分的空间。
这是我的代码：
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>我已经查看了您的代码，我注意到.squared_content_texts_container类将描述文本高度固定为 145px。这就是为什么当第一个框的高度增长时，它没有调整父div 的高度。
尝试从 .squared_content_texts_container 类中删除 145px 高度，或将最小高度设置为 145px。
然后，三个弹性框将在中间垂直对齐，但如果您希望它们顶部对齐，则必须在.squared_content_container类上使用对齐自：弹性开始;样式。
请看这个 jsFiddle 与结果。 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;
}