web-dev-qa-db-ja.com

Angularフルハイトフレックスのマテリアルマットドロワー、コンテンツオーバーフロー自動

昨日、mat-drawerおよびAngulars router-outletに関連していると思われるCSSの問題に直面しました。フルページflexboxに2つの子があります。上部にmat-toolbarがあり、下部にカスタムコンポーネントapp-sidenavがあります。これは正常に機能し、アプリサイドナビが埋められますflexboxは伸縮性があるため、ページの残りの部分です。続行する前に、この簡略化された設定を確認してください。

<div class="flex">
  <mat-toolbar></mat-toolbar>
  <app-sidenav></app-sidenav>
</div>

関連するCSSは

.flex { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: stretch; }
mat-toolbar { flex: 0 0 auto; }
app-sidenav { flex: 1 1 0; }

app-sidenavコンポーネントで、次のテンプレートを取得しました

<mat-drawer-container>
  <mat-drawer></mat-drawer>
  <mat-drawer-content>
    <main><router-outlet></router-outlet></main>
  </mat-drawer-content>
</mat-drawer-container>

そして、関連するスタイルは

mat-drawer-container, mat-drawer-content { display: block; height: 100%; }
main { height: 100%; overflow-y: auto; }

これは問題なく機能し、app-sidenavの高さを超えるコンテンツがない場合を除き、高さは適切です。スクロールバーはmain- tagではなく外側のflexboxコンポーネントに表示されます。また、高さで!importantをテストしましたが、100vhでも成功していません。メインタグでoverflow-yを機能させるにはどうすればよいですか？

私は単純なトリックがあると確信していますが、知ることはできません。ご協力いただきありがとうございます。乾杯！

編集：

この問題について stackblitz を作成しました。 ciaoコンポーネントに移動すると、スクロールバーがメインタグではなくドキュメントルートに表示されることがわかります。

cssangularflexboxangular-materialangular-router
4
Felix Lemke

@Sakkeerの実用的なソリューションに加えて、position属性をハッキングせずにflexを使用する別の方法を見つけました。次のcssルールを既存のスタイルに追加（置換ではなく）するだけです。

app-sidenav { display: flex; }
mat-drawer-container { flex: 1 1 auto; }
6
Felix Lemke

メインのCSSクラスでこれを試してください

main { 
  position: absolute;
  right: 0px;
  left: 0px;
  bottom: 0px;
  top: 0px; 
}
2
Sakkeer A
     <mat-drawer-container autosize style="position: absolute;right: 0px;left: 0px;bottom: 0px;top: 0px;">
        <mat-drawer #drawer mode="side" class="toolbar">
            <app-sidenav></app-sidenav>
        </mat-drawer>
        <router-outlet></router-outlet>
     </mat-drawer-container>

上記のコードは、スタイルを直接配置して自動サイズを使用することで、mat-drawer-containerがルーターページで重複しないように機能しました。

1
Vijender Reddy Chintalapudi