Set height of content in a Bootstrap Card so that it fills the whole card block

Question

I am struggling with the layout defined here: https://jsfiddle.net/zmcode/uk97kfLm/20/.

The problem is that the red div inside the card on the right should

Answer 1

I previously explained that h-100 is height: 100%, and this only works when the container has a defined height.

https://jsfiddle.net/1vgewck9/2/

<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block h-100">
          <div id="right-card-content" class="row">.</div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>

Answer 2

This may solve your problem.

I've set the div's width to 100%, removed the row class from it, and removed the padding of parent (card-block) with p-0.

html, body {
  height: 100%;
}

div.card {
  height: 100%;
}

#left-col {
  height: 100%;
}

#right-col {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#right-card-container {
  flex: 1;
}

#right-card-content {
  height: 100%;
  width: 100%;
  background: red;
}

#right-bottom-element {
  background: blue;
  display: inline-block;
  height: 100px; 
  width: 100%;
}

<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block p-0">
          <div id="right-card-content"></div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>