如何防止列中的Card超出视口，实现内容滚动？

要让红色<body>和蓝色主容器始终贴合视口底部，同时让长卡片内容在自身区域内滚动，只需调整flex布局层级和高度限制即可，修改后的代码如下：

<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>

<body class="d-flex flex-column vh-100" style="border: 2px solid red">
  <header class="navbar justify-content-center p-3 mb-4 border-bottom">
    HERE IS THE HEADER
  </header>

  <div class="body-area container-fluid flex-fill" style="border: 2px solid blue">
    <div class="container h-100">
      <div class="row h-100 d-flex flex-column">
        <div class="col-5 d-flex flex-column">
          <div class="card mb-3">
            <h5 class="card-header">Small Card</h5>
            <div class="card-body">This is a small card</div>
          </div>

          <div class="card h-100">
            <h5 class="card-header">Tall Card</h5>
            <div class="card-body overflow-y-auto">
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
              <div class="row mb-2">Row Content</div>
            </div>
          </div>
        </div>

        <div class="col-7">Main Body</div>
      </div>
    </div>
  </div>
</body>

核心调整说明： #

• 给<div class="container">添加h-100，确保它继承父容器的高度，避免内容撑开容器。
• 给<div class="row">添加h-100 d-flex flex-column，将行设置为垂直flex布局并占满可用高度。
• 给<div class="col-5">添加d-flex flex-column，让列内的卡片垂直排列并自动分配剩余空间。
• 小卡片添加mb-3设置间距，长卡片添加h-100使其占据列内剩余空间。
• 长卡片的card-body使用overflow-y-auto，内容超出时自动显示滚动条，比强制显示滚动条的overflow-y-scroll更友好。

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