Alignment of content vertically in adjacent flexbox containers

by

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:

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:

More Related Contents:

  1. Flex / Grid layouts not working on button or fieldset elements
  2. Proper use of flex properties when nesting flex containers
  3. Center and bottom-align flex items
  4. Why doesn’t percentage padding / margin work on flex items in Firefox and Edge?
  5. Equal height columns with CSS
  6. Make flex items take content width, not width of parent container
  7. Heights rendering differently in Chrome and Firefox [duplicate]
  8. Using flex order property to re-arrange items for desktop and mobile views
  9. Properly sizing and aligning the flex item(s) on the last row
  10. Flexbox fill available space vertically
  11. Flexbox not giving equal width to elements
  12. Rendering problems using flexbox in Firefox and Chrome 48 [duplicate]
  13. Equal space between flex items
  14. How can I make a display:flex container expand horizontally with its wrapped contents?
  15. Why does percentage padding break my flex item?
  16. How to center-align one flex item and right-align another using Flexbox [duplicate]
  17. Why is there vertical scroll on the main container?
  18. Auto Resize Image in CSS FlexBox Layout and keeping Aspect Ratio?
  19. How can I show three columns per row?
  20. How to center horizontally and vertically?
  21. How can I create a row-based masonry layout using CSS?
  22. How do I get a flexbox to have a center fixed and a bottom fixed children together?
  23. How do I make flex box work in safari?
  24. Zebra striping a flexbox table with wrapping items
  25. Element with “display: inline-flex” has a strange top margin
  26. Height is not correct in flexbox items in Chrome [duplicate]
  27. Can flexbox detect when a flex item wraps?
  28. Vertical scroll rendering issue in Flexbox in Firefox [duplicate]
  29. Sticky footer with flexbox
  30. Flexbox layout with two equal height children, one containing nested flexbox with scrolling content

Leave a Comment