diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts
index e638ec247cb..1cd96dbc81a 100644
--- a/src/lib/expansion/expansion-animations.ts
+++ b/src/lib/expansion/expansion-animations.ts
@@ -35,12 +35,12 @@ export const matExpansionAnimations: {
     state('collapsed', style({
       height: '{{collapsedHeight}}',
     }), {
-      params: {collapsedHeight: '48px'},
+      params: {collapsedHeight: '*'},
     }),
     state('expanded', style({
       height: '{{expandedHeight}}'
     }), {
-      params: {expandedHeight: '64px'}
+      params: {expandedHeight: '*'}
     }),
     transition('expanded <=> collapsed', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
   ]),
diff --git a/src/lib/expansion/expansion-panel-header.scss b/src/lib/expansion/expansion-panel-header.scss
index 73a6638a44b..0302f916c6f 100644
--- a/src/lib/expansion/expansion-panel-header.scss
+++ b/src/lib/expansion/expansion-panel-header.scss
@@ -2,9 +2,14 @@
 .mat-expansion-panel-header {
   display: flex;
   flex-direction: row;
+  height: 48px;
   align-items: center;
   padding: 0 24px;
 
+  &.mat-expanded {
+    height: 64px;
+  }
+
   &:focus,
   &:hover {
     outline: none;