填充父项空间的弹性项目元素答案

【问题标题】：Flex item element to fill space of parent填充父项空间的弹性项目元素
【发布时间】：2018-09-27 14:44:31
【问题描述】：

我有 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>

【问题讨论】：

标签： css flexbox

【解决方案1】：

您可以通过在.card 上添加display: flex; 来做到这一点：

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

【讨论】：