伸缩项目元素以填充父级空间

Question

我有2张使用flex进行50/50分割的卡。伸缩项目的高度均相等，但我希望该项目的子元素能够填充父级的高度。在笔中，这意味着蓝色背景颜色将扩展到其父代的高度。

This question非常接近，但是background-clip: padding-box;不能为我解决问题。

此处在线演示：Code pen

    .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>