css - 如何根据内容设置 mat-drawer-container、mat-drawer 和 mat-drawer-content 高度响应？

Question

默认情况下 ma​​t-drawer-container/mat-sidenav-container 和 ma​​t-drawer/mat-sidenav 高度基于 ma​​t-drawer-content/mat-sidenav-content，但我想根据自己的内容和ma​​t-drawer-container高度设置ma​​t-drawer高度根据 ma​​t-drawer 或 ma​​t-drawer-content 中较大者设置。我的 mat-drawer 内容将根据用户输入动态变化，有没有直接的方法可以在 Angular Material 中做到这一点？

为了更清楚起见，下面的链接是一个演示应用程序。

i) 当我使用 height:100vh 时，我会通过滚动条获得全 View 高度(这并不有趣)。

ii) 如果我使用 host:mat-drawer-container:100px，它不接受 fit-content 或 100% 作为值，也不接受 max-height:500px。

iii) 尝试了 { provide: MAT_DRAWER_DEFAULT_AUTOSIZE, useValue: { autosize: true } } 但是当 mat-drawer-content 为空并且 mat-drawer 中有元素列表时，mat drawer 不可见。

https://stackblitz.com/edit/angular-mat-drawer-s1vgwr ？

Answer 1

从关注开始!

<mat-drawer fxFlex #drawer mode="side"
        style="display: inline-table; overflow: auto; position: fixed; margin-top: 75px">

不断调整，直到满足您的要求。最简单的测试方法是使用浏览器开发工具并从那里调整 css。这是我在做一个元素时所遵循的，也想了解其他人的想法。