css - 如何嵌套*位置: sticky* inside of mat-expansion-panel => css grid

Question

在 Accordion 内部，我有一个包含 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 的回答谈到在 .mat-expansion-panel 上使用 overflow: inherit !important，但这会使页面留下大量空白空间和由溢出(但 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，但这使得面板的展开/关闭动画行为怪异。