Flex item element to fill space of parent

Question

I have 2 cards 50/50 split using flex. The flex items both have equal heights, but I'd like a child element of the item to fill the height of the parent. In the pen, this would mean the blue background color would expand to the height of its parent.

This question is very close but the background-clip: padding-box; doesn't solve the issue for me.

Online demo here: 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>

Arkellys · Accepted Answer · 2018-09-27T06:34:31.317

You can do that by adding display: flex; on .card :

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

And then telling your .card-section to take the remaining space with 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>

Flex item element to fill space of parent

1 Answers1