У меня есть два блока – один родительский, другой дочерний.
Вопрос: как сделать так, чтобы родительский блок, растягивался вместе с дочерним? codepen
body {
background: pink;
}
* {
margin: 0;
padding: 0;
font-size: 20px;
}
.groups_line {
margin: 0 auto;
width: 1565px;
padding-right: 40px;
padding-left: 40px;
display: flex;
}
.line {
width: 519px;
min-height: 319px;
height: fit-content;
margin-right: 4px;
position: relative;
background: #63313a;
}
.line:last-child {
margin-right: 0px;
}
.first_group {
background-image: url(img/[email protected]);
}
.second_group {
background-image: url(img/kaboompics.com_Woman_preparing_a_lunch_on_the_kitchen_table.png);
}
.third_group {
background-image: url(img/photo-1453822858805-7c095c06011e.png);
}
.border {
position: absolute;
width: 466px;
height: fit-content;
border: 3px solid #b59f5b;
top: 170px;
left: 50%;
transform: translate(-50%);
}
.border > .heading {
color: #b59f5b;
font-family: "Open Sans";
font-size: 14px;
font-weight: 700;
padding-top: 23px;
padding-bottom: 16px;
text-transform: uppercase;
text-align: center;
font-family: "Josefin Sans", sans-serif;
}
.text {
color: #ffffff;
font-family: "Josefin Sans";
font-size: 20px;
font-weight: 550;
text-transform: uppercase;
text-align: center;
width: 353px;
margin: 0 auto;
font-family: "Josefin Sans", sans-serif;
}
.parent_data {
display: flex;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 10px;
justify-content: space-between;
}
.data {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
position: absolute;
left: 0;
bottom: 0;
line-height: 40px;
margin: 0 7px;
}
.number {
color: #ffffff;
font-family: "Open Sans";
font-size: 12px;
font-weight: 300;
line-height: 40px;
}
.fa-comment {
margin: 0 7px;
color: #b59f5b;
}
.comment_logo {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
}
}
.comment_logo {
display: flex;
align-items: center;
position: absolute;
bottom: 0;
right: 0;
}
<div class="groups_line">
<div class="first_group line">
<div class="first-group-line border">
<p class="group_line heading">beauty health lifestyle</p>
<p class="group_line text">FROM GRAPEFRUIT TO LEMONS TO ORANGES, CITRUS DOES YOU GOOD! Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti quas mollitia natus, porro sit ex nisi blanditiis voluptas minus maxime laboriosam officia sapiente doloremque tempore vel possimus voluptatum iure soluta?</p>
<div class="parent_data">
<p class="group-line data">June 14, 2015</p>
<div class="group-line comment_logo">
<p class="group-line number">24</p>
<i class="fas fa-comment"></i>
</div>
</div>
</div>
</div>
<div class="second_group line">
<div class="second-group-line border">
<p class="group_line heading">health</p>
<p class="group_line text">5 Tips To Supercharge Your
Motivation</p>
<div class="parent_data">
<p class="group-line data">June 14, 2015</p>
<div class="group-line comment_logo">
<p class="group-line number">24</p>
<i class="fas fa-comment"></i>
</div>
</div>
</div>
</div>
<div class="third_group line">
<div class="third-group-line border">
<p class="group_line heading">Beauty</p>
<p class="group_line text">To Keep Makeup Looking Fresh Take A Powder</p>
<div class="parent_data">
<p class="group-line data">June 14, 2015</p>
<div class="group-line comment_logo">
<p class="group-line number">24</p>
<i class="fas fa-comment"></i>
</div>
</div>
</div>
</div>
</div>