fix(expansion-panel): prevent content from being clipped (#7617)

Removes the overflows from expansion panels that aren't animating in order avoid clipping content, as well as things like ripples.

Relates to #7616.

Author: crisbeto

src/demo-app/expansion/expansion-demo.html

@@ -5,7 +5,10 @@ <h1>Single Expansion Panel</h1>
     <mat-panel-description>This is a panel description.</mat-panel-description>
     <mat-panel-title>Panel Title</mat-panel-title>
   </mat-expansion-panel-header>
+
     This is the content text that makes sense here.
+    <mat-checkbox>Trigger a ripple</mat-checkbox>
+
   <mat-action-row>
     <button mat-button (click)="myPanel.expanded = false">CANCEL</button>
     <button mat-button>SAVE</button>

src/lib/expansion/expansion-panel.scss

@@ -11,12 +11,17 @@
 }
 
 .mat-expansion-panel-content {
-  overflow: hidden;
+  .mat-expanded & {
+    overflow: visible;
+  }
+
+  &, &.ng-animating {
+    overflow: hidden;
+  }
 }
 
 .mat-expansion-panel-body {
-  margin: 0 24px 16px;
-  overflow: auto;
+  padding: 0 24px 16px;
 }
 
 .mat-expansion-panel-spacing {