CODEWITHSUNDEEP
htmlcssflexbox
Josh
Josh

Reputation: 11

Equal Row Height in Sibling Flexbox Items/Columns

I have multiple products with a heading, a description and a call-to-action. The word count of each is not regulated. I am using flexbox to display these products so that the containers of each item will be of equal height and can clear to the next row easily without having to mess with nth-child.

My question is this. Is there a flex property (or other CSS property) that can allow me to match the height of rows in separate columns?

Codepen http://codepen.io/fedaykin00/pen/yexOLV

Desired outcome

HTML

<div class="container">
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 1: Far far away</h1>
    </div>
    <div class="item-row item-body">
      <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows
        by their place and supplies it with the necessary</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">Far far away</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 2: A wonderful serenity has taken possession of my entire soul</h1>
    </div>
    <div class="item-row item-body">
      <p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of spring which I enjoy with my whole heart.</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">A wonderful serenity</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 3: One morning, when Gregor Samsa</h1>
    </div>
    <div class="item-row item-body">
      <p>One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">One morning</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 4: The quick, brown fox</h1>
    </div>
    <div class="item-row item-body">
      <p>The quick, brown fox jumps over a lazy dog. DJs flock by when MTV ax quiz prog. Junk MTV quiz graced by fox whelps. Bawds</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">The quick</a>
    </div>
  </div>
  <div class="item">
    <div class="item-row item-heading">
      <h1>Item 5: Li Europan lingues es membres del sam familie</h1>
    </div>
    <div class="item-row item-body">
      <p>Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc, litot Europa usa li sam vocabular. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilite de un nov lingua franca: On refusa</p>
    </div>
    <div class="item-row item-cta">
      <a href="#" class="cta">Li Europan</a>
    </div>
  </div>
</div>

CSS

.container {
  display: flex;
  flex-flow: row wrap;
  background-color: darkred;
  padding: 0.5em;
  justify-content: center;
}

.item {
  box-sizing: border-box;
  display: flex;
  flex-flow: column;
  width: calc((100% - 3em) / 3);
  margin: 0.5em;
  padding: 1em 1em 0 1em;
  background-color: lightgray;
}

.item-row {
  margin: 0 0 1em 0;
  padding: 1em;
  background-color: white;
}
.item-row.item-cta {
  margin-top: auto;
  padding: 0;
}
.item-row.item-cta a {
  display: block;
  background-color: blue;
  padding: 1em;
  color: white;
  text-align: center;
}

h1,
p {
  margin: 0;
}

As Outline

If and when the content of one item's h2 fills two lines, but another only fills one line, I would like to be able to match the height of both of their parent elements (.item-row.item-heading). The same goes for the other instances of .item-row, when they/their children have disparate heights. I want to avoid having to manually set heights based on current content, as I'll have to change it when that content changes.

I'm new to flexbox, so I'm not sure I know all of the properties and how they work. There may be no built-in way to do this. I'm sure there's a way to throw some scripts in the mix to make it do what I want, but I'm trying to avoid that if possible.

Upvotes: 1

Views: 427

Answers (2)

Hart Liddell
Hart Liddell

Reputation: 503

A minimal way to achieve this with Javascript is here.

function setAllToMaxHeight($el) {
  
    var maxHeight = 0;

    $el.each(function() {
        var height = parseInt($(this).css('height').replace('px',''), 10);
        maxHeight = height > maxHeight ? height : maxHeight;
    });

    $el.css({ 'height' : maxHeight });  
}

setAllToMaxHeight($('.item-heading'));

Upvotes: 0

DebRaj
DebRaj

Reputation: 599

You can use jQuery matchHeight:

Your code:

https://jsfiddle.net/debraj/38jtno6a/10/

Full documentation here:

http://brm.io/jquery-match-height/

Upvotes: 1

Related Questions