Angular material 展开时，将面板滚动至屏幕最上方

我有下面的例子。当我展开面板时，它下面的其余项目向下移动，以便为打开的面板的内容腾出空间

但是，我需要的是，当我展开面板时，它应该向上滚动，以便打开面板的标题位于顶部。原因是，我计划使内容高度占据尽可能多的屏幕高度，使打开的面板几乎占据大部分屏幕

对于，
您可以使用以下

css

使展开的扩展面板首先出现，
即展开的扩展面板将移动到列表中的第一个位置

-----------styles.css-----------

.mat-expansion-panel,
.mat-accordion {
  display: flex !important;
  flex-direction: column;
}
.mat-expansion-panel.mat-expanded {
  order: -1;
}

方法：

• 给出

  .mat accordion

  ，

  显示：flex

  并操作

  扩展面板上的
  order
  属性以实现目标

---

您的解决方案很好。然而，这可能会让人困惑，因为我知道我展开的面板在第3行，突然它在第1行。我想我需要的是在不失去平衡的情况下上升到顶端order@iPhoneJavaDev这里的order意味着

flex-box-css属性

，因此它不会改变DOM中的顺序，它只是按照指定的顺序显示特定的div。您可以在DOM结构中看到，打开的扩展面板保持在DOM.Hmmm中的位置，我理解。但你的解决方案是好的，另一个选择。但这仍然不是我想要做的。@iPhoneJavaDev对不起，我以为这是你想要的，所以为同样的东西实现了一个演示。如果可能，请在stackblitz上创建一个小演示，我可以尝试修复这个解决方案。我想图像不清楚。假设这些图像当前显示了滚动条。在第一个图像中，前两个折叠面板位于顶部。在第二张图像中，两个折叠面板位于顶部，几乎没有显示（但您仍然可以从第二个折叠面板中看到小部分）