【Angular v19】テーブルの内部スクロールができない

以下のような構成のフロントエンドがある。

ng-pain-log/
└── pain-log/
    └── src/
        └── app/
            ├── core/
            │   └── header/
            │       ├── header.component.html
            │       ├── header.component.ts
            │       └── header.component.less
            ├── domain/
            ├── features/
            │   └── components/
            │       └── search/
            │           ├── search.component.ts
            │           ├── search.component.html
            │           └── search.component.less
            │       └── data-table/
            │           ├── data-table.component.html
            │           ├── data-table.component.ts
            │           └── data-table.component.less
            │       └── add-button/
            │           ├── add-button.component.html
            │           ├── add-button.component.ts
            │           └──add-button.component.less
            │   └── pages/
            │       └── dashboard/
            │           ├── dashboard.component.html
            │           ├── dashboard.component.ts
            │           └── dashboard.component.less
            ├── infrastructures/
            ├── shared/
            ├── app.component.html
            ├── app.component.ts
            ├── app.component.less
            └── app.routes.ts

<div class="search-container">
  <app-search (searchCompleted)="onSearchCompleted($event)"></app-search>
</div>

<div class="table-container">
  <app-data-table [dataSource$]="dataSource$">
  </app-data-table>
</div>

<div class="add-button">
  <app-add-button (add)="loadPainlog()"></app-add-button>
</div>

dashboardコンポーネントからdata-tableコンポーネントにデータを渡すことでテーブルを表示しているサイトがある。

テーブルだけにスクロールを適用するのに手間取ってしまった。

以下のようにlessを設定したらうまくいった。

/* 親コンポーネントの固定 */
:host {
  height: 100vh;  /* ビューポート全体を占める */
  display: flex;
  flex-direction: column;
  overflow: hidden;  /* スクロール禁止 */
}

/* 検索コンテナの固定 */
.search-container {
  top: 0;
  margin-top: 64px;
  padding: 8px 0;
  position: fixed;
  width: 100%;
  background: white;
  z-index: 10;
}

/* テーブルコンテナのスクロール設定 */
.table-container {
  margin-top: 138px;
  padding-left: 20px;
  padding-right: 20px;
  max-height: 640px; /* 最大高さ */
  overflow-y: auto;
}

/* FAB ボタンの配置 */
.add-button {
  position: fixed;
  right: 30px;
  bottom: 30px;
  z-index: 1000;
  /* 他の要素より前面に表示 */
}

参考Angular materialはこちらから！

Angular Material

UI component infrastructure and Material Design components for Angular web applications.