min-height causes padding to be ignored

kmgt is correct in that card-block is messing up your sizing. Keep in mind that height: 100% is not calculating for the remaining height. Percentage is pretty complicated, but long story short, the most reliable way to use it with respect to the parent container. The interaction between card-block and the min-height: 50px is what is messing up your styling.

Anyone is more than welcome to chime in, but I personally do not reliably know what is exactly going on. That being said, the solution is flexbox. Make the parent flex and give card-block, the element that needs to occupy the rest of the parent's container size, a flex-grow: 1.

html,
body {
  height: 100%;
}
.card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card-header {
  min-height: 50px;
}
.card-block {
  flex-grow: 1;
}

Tags:

Html

Css