Alignment of content vertically in adjacent flexbox containers

Question

I have multiple items say cards. These cards need to stack horizontally and height needs to be the same. This is happening for me.

Each card has an image, text and

Answer 1

TL;DR

Alignment of flexbox items in adjacent flexboxes is not possible in CSS. You really need sub-grids to solve this problem with dynamic sizes of the sections in your card.

---

Flexbox Scenario

Anyway given that you have a min-height for the partner-image-container, so I guess you can have either a min-height set for the a or an ellipsis to keep it to a single line. See below solution that adds an ellipsis:

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: flex;
  flex-wrap: wrap;
}

.partner-card {
  display: flex;
  flex: 1 0 20%;
  border-radius: 0;
  text-align: center;
  border: 3px solid blue;
  padding: 5px;/*3rem;*/
  margin-bottom: 3rem;
  max-width: 20%;
  margin: 5px;
}

.partner-card-content {
  display: flex;
  flex-direction: column;
  min-width: 0; /* ADDED */
}


/*
.card-content .image-container img {
  
  margin: 0;
  padding: 0;
}
*/

.partner-card-content .partner-image-container {
  border: 1px solid green;
  padding: 0;
  margin: 0;
  min-height: 11rem;
  display: flex;
  vertical-align: middle;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p/*, .card-content .image-container*/ {
  flex: 1 0 auto;
  border: 1px solid red;
}

.partner-card-content img.third-image {
  height: 5.5rem !important;
}


/*
p {
  font-size: 16px;
line-height: 26px;
font-family: Averta-Regular,Arial,Helvetica,sans-serif;
margin-bottom: 2.5rem;
margin-top: 0;
}*/

.primary-button { /* ADDED */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

<div class="partner-cards">

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x100" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
      <a class="primary-button" href="#">View ABC Offer</a>
    </div>
  </div>
</div>

Note that you'll have to add min-width: 0 to partner-card-content to override the default min-width: auto setting for a flexbox in the flex axis. You can see some examples of this behaviour below:

• Flexbox affects overflow-wrap behavior

• Flexbox resize and scrollable overflow

• Why don't flex items shrink past content size?

---

CSS Grid Scenario

You can do this in a different way using CSS Grid Layout - as an example consider 3 cards laid out in a row. This works for dynamic heights of each of your card sections - see demo below:

.partner-cards * {
  box-sizing: border-box;
}

.partner-cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: column;
  grid-column-gap: 10px;
}

.partner-card, .partner-card-content {
  display: contents;
}

.partner-card-content .partner-image-container {
  border: 1px solid green;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
}

.partner-card-content p {
  border: 1px solid red;
  margin: 0;
}

.partner-card-content a {
  border: 1px solid;
}

<div class="partner-cards">
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/100x40" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View XXX XXX XXX Offer</a>
    </div>
  </div>
  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/50x150" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s.</p>
      <a class="primary-button" href="#">View YYY Offer</a>
    </div>
  </div>

  <div class="partner-card">
    <div class="partner-card-content">
      <div class="partner-image-container">
        <img src="https://via.placeholder.com/120x100" class="third-image" alt="">
      </div>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
        the industry's standard dummy text ever since the 1500s. Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
      <a class="primary-button" href="#">View ZZZ Offer</a>
    </div>
  </div>
</div>

But again it has limitations because you are not able to control your layout - you don't have control over your cards but you are working on the contents of the cards here which is not very useful. Note that I have used display: contents for the partner-card and partner-card-content elements. When sub-grids are implemented, we will have a complete solution to layouts such as this - see the discussion below too:

• Wrap CSS grid with auto placement