'Hide the scroll-bar when expansion panel is collapsed

The problem I have is that the scroll-bar is showing when the expansion panel is collapsed. It's fine when it's expanded: Collapsed Expanded

<mat-expansion-panel class="panel">
  <mat-expansion-panel-header>
    <mat-panel-title>HH:MM:SS</mat-panel-title>
    <mat-panel-description>Foo</mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-panel>
.panel {
max-height: 1500px;
width: 1000px;
overflow: auto;
}

It's fine when it's expanded.



Solution 1:[1]

You want to use overflow: hidden, not overflow: auto.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 cSharp