Согните элемент item, чтобы заполнить пространство родительского элемента

Question

У меня 2 карты 50/50, разделенные с использованием flex.Элементы flex имеют одинаковую высоту, но я бы хотел, чтобы дочерний элемент элемента заполнил высоту родительского элемента.На ручке это означало бы, что синий цвет фона расширится до высоты его родителя.

Этот вопрос очень близок, но background-clip: padding-box; не решает проблему для меня.

Демонстрация онлайн здесь: Код ручки

    .wrapper {
      max-width: 70%;
      margin: auto;
    }
    
    .cards-group {
      display: flex;
    
      .card {
        flex: 1;
        border: 1px solid #0074d9;
      }
      .card + .card {
        margin-left: 30px;
      }
    }
    
    .card-image {
      img {
        display: block;
        border-radius: 3px;
        margin-left: auto;
        max-width: 90%;
      }
    } // .card-image
    
    .card-section {
      padding: 20px;
      background-color: #7fdbff;
      mix-blend-mode: multiply;
      border-radius: 3px;
      margin-top: -50px;
    
    } // .card-section

  <div class="wrapper">

      <div class="cards-group">

        <div class="card">

          <div class="card-image">
            <img src="https://via.placeholder.com/350x150" alt="">
          </div><!-- .card-image -->

          <div class="card-section">
            <h3 class="card-title">Title</h3>
            <div class="card-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
              <button type="button" class="card-button" onclick="location.href=''">Link</button>
            </div><!-- .card-section -->

          </div>

        </div><!-- .card -->

        <div class="card">

          <div class="card-image">
            <img src="https://via.placeholder.com/350x150" alt="">
          </div><!-- .card-image -->

          <div class="card-section">
            <h3 class="card-title">Title</h3>
            <div class="card-text">
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>          
              <button type="button" class="card-button" onclick="location.href=''">Link</button>
            </div><!-- .card-section -->

          </div>

        </div>
        <!-- .card -->

      </div>

    </div>

Answer 1

Вы можете сделать это, добавив display: flex; к .card:

.card {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #0074d9;
}

и затем попросив .card-section занять оставшееся место с помощью flex: 1:

.card-section {
  padding: 20px;
  background-color: #7fdbff;
  mix-blend-mode: multiply;
  border-radius: 3px;
  margin-top: -50px;
  flex: 1;
}

.wrapper {
  max-width: 70%;
  margin: auto;
}

.cards-group {
  display: flex;
}

.cards-group .card {
  display: flex;
  flex-direction: column;
  flex: 1;
  border: 1px solid #0074d9;
}

.cards-group .card + .card {
  margin-left: 30px;
}

.card-image img {
  display: block;
  border-radius: 3px;
  margin-left: auto;
  max-width: 90%;
}

.card-section {
  padding: 20px;
  background-color: #7fdbff;
  mix-blend-mode: multiply;
  border-radius: 3px;
  margin-top: -50px;
  flex: 1;
}

<div class="wrapper">
  <div class="cards-group">
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/350x150" alt="">
      </div>
      <!-- .card-image -->
      <div class="card-section">
        <h3 class="card-title">Title</h3>
        <div class="card-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
          <button type="button" class="card-button" onclick="location.href=''">Link</button>
        </div>
        <!-- .card-section -->
      </div>
    </div>
    <!-- .card -->
    <div class="card">
      <div class="card-image">
        <img src="https://via.placeholder.com/350x150" alt="">
      </div>
      <!-- .card-image -->
      <div class="card-section">
        <h3 class="card-title">Title</h3>
        <div class="card-text">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sagittis sagittis pellentesque.</p>          
          <button type="button" class="card-button" onclick="location.href=''">Link</button>
        </div>
        <!-- .card-section -->
      </div>
    </div>
    <!-- .card -->
  </div>
</div>