min-height causes padding to be ignored

Question

After adding min-height to a div, the child element is flowing outside of the padding. The next element has height: 100%, which I think has something to do with it.

html, body { height: 100%;}
.card {height: 100%;}
.card-header {min-height: 50px;}
.card-block {height: 100%;}

<link data-require="[email protected]" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="[email protected]" data-semver="4.1.3" src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>


        <div class="card">
          <div class="card-header">
            <div class="d-flex align-items-center flex-column">
              <div>line 1</div>
              <div>line 2</div>
              <div>line 3</div>
            </div>
          </div>
          <div class="card-block">
            Some other content
          </div>
        </div>

You can see the issue in this plunk. If you simply remove the min-height: 50px code from the card-header class, you can see that it gets a little bigger. I would like to have a min-height, but still have the padding respected. I really don't understand what's happening here.

Answer 1

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