Make all inner children of equal height

Question

I want all H3 tag height to be of equal size. I used flex but got stuck at some level.
So I need help, please suggest CSS for the given html and css.

Sample Code : Demo

Below is the HTML


  <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
        <div class="post-body clearfix">        
          <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book</p> 
        </div>
    </div>
  </div>

   <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</h3>
        <div class="post-body clearfix">        
          <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> 
        </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">       
        <h3 class="post-title">How can non-profits leverage predictive analytics to build forecasting models?</h3>
        <div class="post-body clearfix">        
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> 
        </div>
    </div>
  </div>  
</section>

im guessing you want all h3 to be the same height as the highest, in that case it's probably not possible with only css — Chris Li, Sep 16 '19 at 13:39
There is NO **non-experimental** CSS method of equalising heights of elements that do not share a parent - https://stackoverflow.com/questions/56711501/align-child-elements-of-different-blocks — Paulie_D, Sep 16 '19 at 14:56

score 0 · Answer 1 · answered Sep 16 '19 at 13:30

0

Is this what you mean?

h3{
  height:40px;
}

answered Sep 16 '19 at 13:30

Bloom

27
2

1

without fixed height – Anjali Jain Sep 16 '19 at 13:33

score 0 · Answer 2 · answered Sep 16 '19 at 13:59

Here is something different solution,

const container = document.querySelector('.fix-h3-heights');
const titles = container.querySelectorAll('h3');

const heights = [];
for (const title of titles) {
  heights.push(+title.clientHeight);
}

const minHeight = Math.max(...heights);
for (const title of titles) {
  title.style.height = minHeight + 'px';
}

.row {
  display: flex;
  flex-flow: row wrap;
  background: pink;
  margin: -8px;
}

.col {
  display: flex;
  flex: 1 0 400px;
  flex-flow: column;
  margin: 10px;
  background: grey;
}

.card {
  display: flex;
  padding: 20px;
  height: 100%;
  background: #002732;
  color: white;
  opacity: 0.5;
  align-items: stretch;
  flex-direction: column;
}

<div class="row fix-h3-heights">

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting</h3>
      <div class="post-body clearfix">
        <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, when an unknown printer took a galley of type and scrambled it to make a type specimen book
        </p>
      </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</h3>
      <div class="post-body clearfix">
        <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>
      </div>
    </div>
  </div>

  <div class='col'>
    <div class="card span12">
      <h3 class="post-title">How can non-profits leverage predictive analytics to build forecasting models?</h3>
      <div class="post-body clearfix">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p>
      </div>
    </div>
  </div>

</div>

score -1 · Answer 3 · answered Sep 16 '19 at 14:01

Using CSS Grid:

Here's the CodePen

* {
  box-sizing: border-box;
}

.container {
  max-width: 800px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 1fr;
  grid-row-gap: 30px;
}

.description {
  background: blue;
  grid-column: 1 / span 4;
}

<div class="container">

  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>


  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed
  </div>
  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>

  <div class="description">
    Lorem ipsum in ut amet aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia. Lorem ipsum in ut amet
    aute eu nulla labore do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia. Lorem ipsum in ut amet aute eu nulla labore
    do exercitation magna aliquip commodo dolore aute fugiat labore dolore ad culpa dolore pariatur qui in sed est magna cillum nisi ex deserunt sit incididunt aliquip adipisicing in officia.
  </div>

</div>

You can further customize the CSS

Make all inner children of equal height

3 Answers3