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

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%;
}

  

    

      Left Card
    
  
  

    

      

        
Right Card
        

          

        
      
    
    

      Right Bottom Element