如何让子元素（卡片主体card-body）自适应填充父容器高度？

嘿，我看了你的卡片结构，问题出在中间那层自定义的.inner容器上！Bootstrap的.card本身是基于flex布局的，你给它加了h-100让它占满父高度，但中间多了个.inner，它没有继承高度也没设置flex布局，导致.card-body没办法自动撑满剩余空间。

给你两个简单的修改步骤，就能解决这个问题：

• 第一步：给.inner容器加上d-flex、flex-column、h-100类，让它变成flex容器，并且占满整个卡片的高度，这样它的子元素就能用flex规则分配空间了。
• 第二步：给.card-body加上flex-grow-1类，这个类会让它自动占据容器里剩下的所有垂直空间，不管卡片整体高度怎么变，主体部分都会自适应填满。

修改后的完整代码是这样的：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="card h-100">
  <div class="inner mt-n2 d-flex flex-column h-100">
    <div class="card-header">
      <h3 class="card-title">
        <i class="fas fa-search mr-1"></i> Title
      </h3>
    </div>
    <div class="card-body flex-grow-1">
      <p>Body</p>
    </div>
  </div>
</div>

另外提个小注意点：你给.inner加的mt-n2负margin可能会让顶部有点偏移，如果出现布局错位的情况，可以调整.card-header的padding或者.inner的margin值，别让它破坏flex布局的垂直空间计算哦。

内容来源于stack exchange