Народ, всем привет. Помогите пожалуйста, имеется следующий затуп: верстаю макет, тут есть блок с постами блога. Хочу сделать так, чтобы все посты растягивались по высоте по мере необходимости: допустим в одном из постов, в заголовке, много текста и соседние тянутся, чтобы соответствовать ему по высоте. Но не выходит: div с контентом не растягивается по высоте родителя, а остаётся фиксированным. Подскажите, как вылечить.
<article class="post">
<div class="post-image">
<img src="pics/blog/1.jpg" alt="blog post picture">
</div>
<div class="post-info">
<div class="post-header">
<h3>all about headshots inside professional studios</h3>
</div>
<div class="sub-info">
<div class="comments">
<img src="pics/icons/common/comments.png" alt="comments">
<span>15 Comments</span>
</div>
<div class="date">
<span>June, 2021</span>
</div>
</div>
</div>
</article>
.blog .posts .post {
flex: 0 1 32.16%;
background: #f6f6f6;
position: relative;
}
.blog .posts .post h3 {
font-size: 1.25rem;
font-family: Poppins-SemiBold, sans-serif;
line-height: 1.4em;
text-transform: uppercase;
}
.blog .posts .post-image img {
display: block;
}
.blog .posts .post-info {
min-height: 200px;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 22px 22px 30px 26px;
}
.blog .posts .sub-info {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
justify-content: space-between;
align-items: center;
}
.blog .posts .sub-info .comments {
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: flex;
align-items: center;
}