CODEWITHSUNDEEP
htmltwitter-bootstrapcssflexbox
Jake
Jake

Reputation: 633

Equal height flex items when inner content has different height

I need columns that will have the same height, so I used flex (I use bootstrap framework).

I know that flex work can be seen in the attached picture, but the height of the boxes is not the same, by the fact that one is less text than the other.

enter image description here

enter image description here

I want class inner-div to match to the height of col-md-4.

Can someone help me adjust the height so that it is always the same?

.col-md-4 {
  border: 1px solid black;
}
.row-eq-height {
  display: flex;
}
.inner-div {
  border: 1px solid red;
}
<div class="container">
  <div class="row row-eq-height">
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>
      <div class="inner-div">
        adsadadadada
      </div>
    </div>
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <div class="inner-div">
        asdadadaada
      </div>
    </div>
    <div class="col-md-4">
      ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>ddddddsadddddddsadddddddsadddddddsa
      <br>
      <div class="inner-div">
        asdadaadas
      </div>
    </div>
  </div>
</div>

Upvotes: 4

Views: 3073

Answers (3)

Tarun
Tarun

Reputation: 1089

It's simple. When you want to set the inner-div's height to it's parent's height, set the inner-div to display:flex and flex-grow:1. It will take up the height of the parent. Additionally you can set align-items: stretch to the parent div. This makes all the inner divs to stretch out to what the parent has.

Hope it works for you.

Upvotes: 2

Michael Benjamin
Michael Benjamin

Reputation: 371231

The problem is that .inner-div is not a flex item, so it doesn't accept flex properties.

Flex layout works only within a parent-child relationship. .row-eq-height is a flex container because you've given it display: flex. This means that .col-md-4 is a flex item, because it's the child of .row-eq-height.

Looking at your images (the highlighted section), you'll see that flex equal height columns are actually working. Each .col-md-4 container is the same height.

However, the children of .col-md-4 are not flex items. They are normal elements in a block, not flex, formatting context.

The solution is to make .col-md-4 a flex container so flex properties can be applied to .inner-div.

.row-eq-height {
  display: flex;
}
.col-md-4 {
  display: flex;
  flex-direction: column;
  border: 1px solid black;
}
.inner-div {
  flex: 1;
  border: 1px solid red;
}
<div class="row row-eq-height">
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>
    <div class="inner-div">
      adsadadadada
    </div>
  </div>
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <div class="inner-div">
      asdadadaada
    </div>
  </div>
  <div class="col-md-4">
    ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>ddddddsadddddddsadddddddsadddddddsa
    <br>
    <div class="inner-div">
      asdadaadas
    </div>
  </div>
</div>

Upvotes: 3

Adam Buchanan Smith
Adam Buchanan Smith

Reputation: 9449

I think you are looking for a solution like this: https://jsfiddle.net/Lddyn573/4/

I set the height of the box-header to calc(100% -24px), 24px is the height of the bottom div.

/* CSS used here will be applied after bootstrap.css */
.col-md-4 {
  border: 1px solid black;
  padding: 10px;
}

.row-eq-height {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
.box-header{
  height: calc(100% - 24px);
  border: 1px solid green;
}    
.box-content {
    border: 1px solid red;
}

Upvotes: 1

Related Questions