Странное поведение Flex элемента
Пытался сделать justify-content: space-between на class="paper__item-descr" при условии, что на class="paper__item" уже стоит flex, по идее должно было раскинуть текст, но ничего не происходит. В итоге пришлось накинуть flex на все родительские элементы и тогда flex заработал, не могу понять почему так.
<div class="paper--flex">
<div class="col-xs-4 col-lg-4 col-md-6 col-sm-6 paper--flex">
<div class="paper__item">
<div class="paper__item-img">
<img src="img/paper/paper1.png" alt="статья">
<div class="paper__item-like">
<img src="img/paper/like.png" alt="лайк">
99999
</div>
</div>
<div class="paper__item-descr">
<h3>Какой-то текст</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi nesciunt distinctio
maxime
dicta soluta, facere omnis praesentium beatae nihil odio.</p>
<div class="paper__item-descr--link">
<a href="" class="linkColorRoze borderDashed">ПОДРОБНЕЕ</a>
</div>
</div>
</div>
</div>
</div>
.paper {
&__item {
margin-right: 1.042vw;
display: flex;
flex-direction: column;
&-img {
position: relative;
}
&-like {
position: absolute;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.521vw 0.781vw;
background-color: #fff;
top: 1vw;
right: 1vw;
border-radius: 19px;
font: $fontMuseoSansCyrlLight_16;
& img {
margin-right: 6px;
}
}
&-descr {
text-align: left;
margin-top: 2.083vw;
display: flex;
flex-direction: column;
justify-content: space-between;
flex: 1;
& p {
margin-top: 0.781vw;
}
&--link {
margin-top: 1.563vw;
}
}
}
}