Angular Offcanvas适配需求：内容未超视口自适应，超视口时显示滚动条

场景与现有代码 #

我有一个Angular组件，通过offcanvasService将AdvancedSearchComponent作为顶部offcanvas打开，打开逻辑代码如下：

openTop() {
  this.offcanvasService.open(AdvancedSearchComponent, {
    position: 'top',
    backdropClass: 'bg-dark',
    panelClass: 'h-25 bg-danger text-bg-danger flex-column',
    keyboard: true,
  });
}

AdvancedSearchComponent的模板结构：

<nav class="navbar navbar-expand-lg navbar-dark bg-danger">
  <div class="navbar-toggler border-0 ps-2 ps-sm-3 py-2 py-lg-0">
    <a class="navbar-brand" href="#"><img src="assets/..."/></a>
  </div>
  <button
    class="navbar-toggler mx-2 mb-2"
    type="button"
    data-bs-toggle="collapse"
    data-bs-target="#navbarSearch"
    aria-controls="navbarSearch"
    aria-expanded="false"
    aria-label="Toggle navigation"
  >
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse flex-grow-1" id="navbarSearch">
    <form
      class="overflow-auto flex-grow-1"
      (ngSubmit)="searchTask()"
      [formGroup]="searchForm"
    >
      <div class="offcanvas-header pe-0 pt-0 pb-1 align-items-start">
        <!-- 其他内容 -->
      </div>
      <!-- 更多搜索表单内容 -->
    </form>
  </div>
</nav>

组件相关CSS：

:host {
  height: 100%;
  display: flex;
  flex-direction: column;
}
form {
  scrollbar-gutter: stable;
}

当前问题 #

• 给<nav>加overflow-auto类：offcanvas高度被固定为25vh，内容放不下时会出现滚动条，但无法自适应内容高度。
• 给<nav>加overflow-visible类或不设置overflow：offcanvas会随内容扩展高度，但内容超出视口时没有滚动条，无法查看全部内容。

需求 #

实现顶部offcanvas面板自适应内容高度，当内容超出视口高度时自动显示滚动条。

已尝试方案 #

• 移除应用中body {overflow: hidden}样式，仅给背景内容加滚动条，未解决offcanvas滚动问题。
• 添加额外<div>元素并设置不同类名，无效果。
• 为元素设置max-height、height属性或对应Bootstrap类，未达预期。
• 了解到部分方案建议用padding解决，但未理解具体实现方式。

解决方案 #

步骤1：移除固定高度限制 #

首先在offcanvas打开配置中去掉h-25类，这个类强制将面板高度固定为25vh，是自适应的最大障碍：

openTop() {
  this.offcanvasService.open(AdvancedSearchComponent, {
    position: 'top',
    backdropClass: 'bg-dark',
    panelClass: 'bg-danger text-bg-danger flex-column', // 移除h-25
    keyboard: true,
  });
}

步骤2：调整宿主组件CSS #

修改:host的样式，限制最大高度为视口高度，同时允许高度自适应内容：

:host {
  max-height: 100vh; /* 面板最大高度不超过视口 */
  height: auto; /* 自适应内容高度 */
  display: flex;
  flex-direction: column;
}

步骤3：设置内部滚动容器 #

将滚动逻辑转移到内部的折叠容器（#navbarSearch），让它占据剩余空间并在内容溢出时滚动：

#navbarSearch {
  flex-grow: 1;
  overflow-y: auto; /* 垂直内容溢出时显示滚动条 */
  scrollbar-gutter: stable; /* 保持滚动条 gutter 稳定，避免布局跳动 */
}

form {
  height: 100%; /* 让表单填满父容器 */
}

原理说明 #

去掉固定高度后，offcanvas会先根据内容自动调整高度；当内容高度超过视口时，:host的max-height:100vh会限制面板的最大高度，内部的#navbarSearch因为设置了flex-grow:1和overflow-y:auto，会自动占据剩余空间并在内容超出时显示滚动条，既实现了高度自适应，又保证了内容可滚动查看。

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