Расширение контейнеров flexbox, не давящих вниз

Question

У меня есть несколько элементов, которые будут содержать изображение фиксированного размера и некоторый текст ниже допустимой длины, одно неприятное поведение, которое я заметил, когда тексты больше, чем высота текстового контейнера, где элемент div растет, но не отталкивает отображаемые элементыниже (тело имеет гибкий дисплей со столбцом направления), так что это был бы предпочтительный результат, верно?

Это то, о чем я говорю: https://imgur.com/a/MjwOxXX

Обратите внимание, как верхняя часть занимает местоиз нижней секции, перекрывая ее вместо того, чтобы весь контейнер растил и толкал вниз по нижней секции.

Это мой код:

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 FriendOne 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 upOne 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 FriendOne 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 upOne 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

Я просмотрел ваш код и заметил, что класс .squared_content_texts_container фиксирует высоту текста описания до 145px.Вот почему при увеличении высоты первого блока высота родительского элемента не изменялась.

Попробуйте удалить высоту 145px из класса .squared_content_texts_container или задать min -высота до 145px.

Затем три flex-бокса будут вертикально выровнены в середине, но если вы хотите, чтобы они были выровнены по верху, вы должны использовать align-self: flex-start;стиль для класса .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;
 }