如何在 mat-expansion-panel => css grid 中嵌套 *position:sticky*

Question

在手风琴内部，我有一个带有 2 列（实际上更多，但为了简单起见）的网格，它们的长度都是可变的（动态表单创建器）。在左栏中，我有一些按钮，当向下滚动右栏时，我想留在屏幕上。css网格或扩展面板是否与粘性相矛盾？我试图找到隐藏的溢出，因为我读到你不能这样做，但我没有找到。你看到我遗漏了什么以及为什么我的粘性没有留下吗？

.html

...
<mat-expansion-panel>
   <mat-expansion-panel-header>
        Header
   </mat-expansion-panel-header>
   <div class="grid">
        <div id="left">
           <div class=sticky>
              stay on screen
           </div>
        </div>
        <div id="right">
              some other really long content
        </div>                      
    </div>
    </mat-expansion-panel>
</mat-accordion>
...

.css

.sticky {
    position: sticky;
    top:0;
}

.grid {
    display: grid;
    grid-template-columns: 2fr 8fr;
}

Answer 1

我遇到了一种情况，当mat-expansion-panel-header您滚动时，我需要展开的内容粘在页面顶部。

@Mateusz Budzisz 的回答谈到了overflow: inherit !important在 上使用.mat-expansion-panel，但这会给页面留下大量的空白空间和滚动条，这是由于溢出（但height: 0'd）扩展面板主体造成的。

我通过添加以下规则解决了这个问题：

.mat-expansion-panel {
    overflow: inherit !important;
}

.mat-expansion-panel-body {
    overflow: hidden; // This rule fixes extra whitespace
}

.mat-expansion-panel-header.mat-expanded {
    position: sticky;
    top: 0;
    z-index: 1000;
}

现在，所有展开的面板标题都按其应有的方式粘在页面顶部，并且关闭面板时没有空白空间。

我最初尝试将overflow: hidden;规则添加到.mat-expansion-panel-content，但这使得面板的展开/关闭动画表现得很奇怪。