Bulma: Equal height of card components

[danielbayerlein]

What is the way to go if I want to align two card components to the same height.

<div class="container">
  <div class="columns">
    <div class="column">
      <div class="card">
        <div class="card-content">Hello World</div>
      </div>
    </div>
    <div class="column">
      <div class="card">
        <div class="card-content">
          Hello
          <br>
          <br>
          World
        </div>
      </div>
    </div>
    <div class="column">
      <div class="card">
        <div class="card-content">Hello World</div>
      </div>
    </div>
  </div>
</div>

[danielbayerlein]

Stupid question! The answer is too simple:

.card {
  height: 100%;
}

[de-raaf-media]

Simple enough but that does not seem to work in Safari?

[timonweb]

Confirm, this seems not to work in Safari

[heltonteixeira]

@danielbayerlein
Using height: 100% only works if you don't use card-footer.

[rogierborst]

@heltonteixeira

.card {
    display:flex;
    flex-direction: column;
}
.cart-footer {
    margin-top: auto;
}

This will push your footers to the bottom.

[l2aelba]

Yep base on @rogierborst

.bm--card-equal-height {
   display: flex;
   flex-direction: column;
   height: 100%;
}
.bm--card-equal-height .card-footer {
   margin-top: auto;
}

So now you can do something like :

<div class="card bm--card-equal-height">
   <!-- content -->
</div>

Note : Use card inside columns

[erosenberg]

So I'm running into something similar with this... I'm able to get all of the cards to be full height, but the card-content itself is not stretching to the bottom when I set it height: 100%. In fact, it usually goes over the card's actual height. I could just apply overflow: hidden to the cards but that seems kind of hacky, right? Is there anything else I can try?

[danny117117]

I am facing some problem with angular flex layout I can not get the card to have the same height

edit

[Yorer]

.card {
  height: 100%;
  display:flex;
  flex-direction: column;
}

.card-block{
  height: 100%;
}

This will automatically push the footer to bottom, and also card-footer border will be on the right place.

[malprax]

.card {
  height: 100%;
  display:flex;
  flex-direction: column;
}

.card-block{
  height: 100%;
}

This will automatically push the footer to bottom, and also card-footer border will be on the right place.

thank you @Yorer

[bekwam]

.card-block didn't work for me, but using .card-footer did

.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.card-content {
    height: 100%;
}

[jschouwstra]

Stupid question! The answer is too simple:

.card {
  height: 100%;
}

I don't think you should call someone stupid regardless of the question.

[noraj]

I don't think you should call someone stupid regardless of the question.

Unless the guy who asked was himself...