Как сделать так, чтобы родительский блок растягивался вместе с дочерним?

Question

У меня есть два блока – один родительский, другой дочерний.

Вопрос: как сделать так, чтобы родительский блок, растягивался вместе с дочерним? 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>

Answer 1

Если коротко:

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.parent {
  background-color: red;
  max-width: 500px;
  width: 100%;
  padding: 40px;
  margin: 0 auto;
}

.child {
  background-color: green;
}

<div class="parent">
  
  <div class="child">
    Текст
  </div>

</div>

Если не коротко:

@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap");

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
}

body {
  min-height: 100%;
  font-family: "Roboto", sans-serif;
  background-color: pink;
}

:root {
  --poopColor: #b59f5b;
}

img {
  display: block;
  max-width: 100%;
}

section {
  padding: 40px 0;
}

.container {
  max-width: 1200px;
  display: block;
  margin: 0 auto;
  padding: 0 15px;
  width: 100%;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex__item {
  background-color: #63313a;
  --elements: 3;
  --marginRight: 15px;
  width: calc( 100% / var(--elements) - ( ((var(--elements) * var(--marginRight)) - var(--marginRight)) / var(--elements)));
  color: white;
  padding: 20px;
  text-align: center;
  background: url('https://picsum.photos/1000/500') no-repeat center;
  background-size: cover;
  position: relative;
  z-index: 1;
}

.flex__item:nth-child(2n) {
  background-image: url('https://picsum.photos/1100/500');
}

.flex__item:nth-child(3n) {
  background-image: url('https://picsum.photos/1000/600');
}

.flex__item::before {
  position: absolute;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.6);
}

.flex__item_border {
  border: 3px solid var(--poopColor);
  padding: 10px;
  margin-top: 170px;
}

.flex__item_border > *:not(:last-child) {
  margin-bottom: 20px;
}

.flex__item:not(:nth-child(3n)) {
  margin-right: var(--marginRight);
}

.flex__item_info {
  display: flex;
  justify-content: space-between;
}

.flex__item_info_comment {
  display: flex;
}

.flex__item_info_comment i {
  color: var(--poopColor);
}

.flex__item .comment_number {
  margin-right: 10px;
}

.flex__item_title {
  color: var(--poopColor);
  font-weight: bold;
  text-transform: uppercase;
  font-size: 20px;
}

.flex__item_text {
  text-transform: uppercase;
}

.flex__item_nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.flex__item_nav a {
  color: white;
  text-decoration: none;
  outline: none;
  position: relative;
  display: inline-block;
  cursor: pointer;
  padding: 5px 0;
  user-select: none;
}

.flex__item_nav a::after {
  position: absolute;
  content: '';
  display: block;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--poopColor);
  bottom: 0;
  transform: scaleX(0);
  transform-origin: center bottom;
  transition: transform 0.2s linear;
}

.flex__item_nav a:hover::after {
  transform: scaleX(0.8);
}


@media (max-width: 880px) {
  .flex__item {
    --elements: 2;
  }

  .flex__item:not(:nth-child(3n)) {
    margin-right: 0;
  }

  .flex__item:not(:nth-child(2n)) {
    margin-right: var(--marginRight);
  }
  
  .flex__item:nth-child(n+3) {
    margin-top: 10px;
  }
}

@media (max-width: 560px) {
  .flex__item {
    --elements: 1;
  }

  .flex__item:not(:nth-child(2n)) {
    margin-right: 0;
  }

  .flex__item:nth-child(n+3) {
    margin-top: 0;
  }

  .flex__item:nth-child(n+2) {
    margin-top: var(--marginRight);
  }
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" integrity="sha384-gfdkjb5BdAXd+lj+gudLWI+BXq4IuLW5IT+brZEZsLFm++aCMlF1V92rMkPaX4PP" crossorigin="anonymous">

<section>
  <div class="container">
    
    <div class="flex-container">
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_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?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_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?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
      <div class="flex__item">
        <div class="flex__item_border">
          <div class="flex__item_nav">
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
            <a class="flex__item_link">Health</a>
          </div>
          <div class="flex__item_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?</div>
          <div class="flex__item_info">
            <div class="flex__item_info_date">June 14, 2015</div>
            <div class="flex__item_info_comment">
              <div class="comment_number">24</div>
              <i class="fas fa-comment"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</section>

БЛОГ НА HUSL

Как сделать так, чтобы родительский блок растягивался вместе с дочерним?

Ответы (1 шт):