CODEWITHSUNDEEP
htmlcssbootstrap-4flexbox
Rasul
Rasul

Reputation: 128

Bootstrap flex containers equal height for children

I am trying to rewrite html table to bootstrap flex divs.

Stack on how to keep the same height of logical child elements of containers?

https://jsfiddle.net/48qdk3r5/1/

It looks some buggy behaviour then I try set up .content height to 100%, the next row of elements overflows first row.

<div class="container">
  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
<!--end first row -->

  <div class="row">
    <div class="col">
      <div class="header">
        <h2>Header</h2>
      </div>
      <div class="content d-flex">
        <div class="text-center w-50">
          <h3>Sub1</h3>
          <p>Iam sub 1.</p>
        </div>
        <div class="text-center w-50">
          <h3>Sub2</h3>
          <p>Iam sub 2.</p>
        </div>
      </div>
    </div>
    <div class="col">
      <div class="header">
        <h2>Header3</h2>
      </div>
      <div class="text-center content">
          <h3>Sub3</h3>
          <p>Iam sub 3.</p>
          <p>Iam sub 3.</p>
      </div>
    </div>
  </div>
</div>```

I expect all elements of row to be the same height.

Upvotes: 1

Views: 1608

Answers (1)

symlink
symlink

Reputation: 12208

You can achieve equal heights by making your .col divs flexboxes, too, and using flex-grow for the .content boxes:

.col{
  display: flex;
  flex-flow: column;
}
.col .content{
  flex-grow: 1;
}

See this updated jsFiddle: https://jsfiddle.net/t29ph10d/

Upvotes: 4

Related Questions