最小高度导致填充被忽略

Question

添加min-height到div之后，子元素将在填充之外流动。下一个元素具有height: 100%，我认为这与它有关。

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

<link data-require="bootstrap@4.1.3" data-semver="4.1.3" rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<script data-require="bootstrap@4.1.3" 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>

您可以在这个问题中看到问题。如果min-height: 50px仅从card-header类中删除代码，则可以看到它变得更大了。我想要一个最小的高度，但是仍然要尊重填充。我真的不明白这里发生了什么。

Answer 1

kmgt 是正确的，因为card-block它会弄乱您的尺寸。请记住，这height: 100%不是计算剩余高度。百分比非常复杂，但长话短说，这是相对于父容器使用它的最可靠的方法。card-block和之间的相互作用min-height: 50px会扰乱你的造型。

非常欢迎任何人插话，但我个人并不清楚到底发生了什么。话虽这么说，解决方案是flexbox。创建父级flex并给出card-block需要占据父级容器剩余大小的元素 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;
}