如何让Bootstrap中vh-100列内的div占满剩余空白空间？

要让<div class="bg-primary"></div>占满所在vh-100列的剩余空间且不超出范围，用Bootstrap自带的Flex布局类就能搞定，具体操作如下：

• 给右侧的col-10 vh-100容器添加d-flex flex-column类，将其设为垂直弹性容器，内部元素会按垂直方向分配空间。
• 把顶部的用户信息栏、Dashboard标题、卡片区域包裹到一个容器中，添加flex-shrink-0类，保证这些内容不会被压缩，维持原有高度。
• 给目标的bg-primary容器添加flex-grow-1类，它会自动填充父容器的剩余空白空间，且不会超出vh-100的范围。

修改后的完整代码示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/css/style.css" />
    <!-- bootstrap -->
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css"
    />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js"></script>
    <!-- font aweseome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <!-- favicon -->
    <link rel="icon" type="image/x-icon" href="/img/favicon.png" />
    <title><%= title %></title>
  </head>
  <body>

<section style="background-color: #f9f9f9">
  <div class="container-fluid">
    <div class="row">
      <!-- Navbar -->
      <!-- ! -->
      <div
        class="navbar col-2 d-flex vh-100 flex-column"
        style="background-color: #ffff"
      >
        <div class="container">
          <a href="" class="navbar-brand mt-3 mb-4">
            <img src="/img/no-bg.png" alt="" class="img-fluid" />
          </a>

          <div class="navbar-nav">
            <a
              class="nav-link my-2 text-secondary-emphasis"
              aria-current="page"
              href="#"
            >
              <i class="fa-solid fa-house"></i> Home</a
            >
            <a class="nav-link my-2 text-secondary-emphasis" href="#"
              ><i class="fa-solid fa-wallet"></i> Balance</a
            >
            <a class="nav-link my-2 text-secondary-emphasis" href="#"
              ><i class="fa-solid fa-arrow-right-arrow-left"></i> Transaction</a
            >
            <a class="nav-link my-2 text-secondary" href="#"
              ><i class="fa-solid fa-gear"></i> Settings</a
            >
            <a class="nav-link my-2 text-secondary" href="#"
              ><i class="fa-solid fa-circle-info"></i> About Us</a
            >
          </div>
        </div>
      </div>
      <!-- End of Navbar -->
      <!-- ! -->
      <!-- 修改：添加d-flex flex-column -->
      <div class="col-10 vh-100 d-flex flex-column">
        <!-- 修改：新增容器包裹顶部内容，添加flex-shrink-0 -->
        <div class="flex-shrink-0">
          <div class="col-12 d-flex justify-content-end py-2 align-items-center">
            <img
              src="/img/default.png"
              alt="profile pic"
              class="rounded-5"
              style="height: 35px; width: 35px"
            />
            <h6 class="px-2" style="margin: 0">Fahchouch Mohammed</h6>
          </div>
          <h2 class="my-3">Dashboard</h2>

          <!-- Cards -->
          <div class="row g-1">
            <!-- First card -->
            <div class="col-3 card text-bg-primary p-3 rounded-4 mx-4">
              <div class="card-subtitle" style="font-size: x-small">
                My Balance
              </div>
              <div class="card-title px-3"><h2>$0</h2></div>
              <div class="row mx-3" style="font-size: 0.7rem">
                <div class="col-6">
                  <div style="color: #b9b9ef">Card Holder</div>
                  <div>Fahchouch Mohammed</div>
                </div>
                <div class="col-6">
                  <div style="color: #b9b9ef">Valid Thru</div>
                  <div>00/00</div>
                </div>
              </div>
            </div>
            <!-- Second Card -->
            <div
              class="col card rounded-4 mx-4 d-flex justify-content-center align-items-center"
            >
              <div class="row d-flex align-items-center justify-content-center">
                <div class="col-4">
                  <i class="fa-solid fa-coins" style="font-size: 2rem"></i>
                </div>
                <div class="col-8">
                  Income
                  <h2>$0</h2>
                </div>
              </div>
            </div>
            <!-- Third card -->
            <div
              class="col card rounded-4 mx-4 d-flex justify-content-center align-items-center"
            >
              <div class="row d-flex align-items-center justify-content-center">
                <div class="col-4">
                  <i
                    class="fa-solid fa-money-bill-transfer"
                    style="font-size: 2rem"
                  ></i>
                </div>
                <div class="col-8">
                  Expense
                  <h2>$0</h2>
                </div>
              </div>
            </div>
          </div>
          <!-- End Cards -->
        </div>
        <!-- 修改：添加flex-grow-1 -->
        <div class="bg-primary flex-grow-1"></div>
      </div>
    </div>
  </div>
    
</body>
</html>

内容的提问来源于stack exchange，提问作者simo