fix: guides overlapping footer on narrow screens (#1007)

Fixes that the guide tiles can overlap the footer on smaller screens.

Fixes https://github.com/angular/components/issues/22860.

Author: crisbeto

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/app/pages/guide-list/guide-list.scss

@@ -1,6 +1,9 @@
 :host,
 .docs-guide {
-  height: 100%;
+  // Ensures that the footer is pushed to the bottom if the page is too short.
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
 }
 
 .docs-guide-list {

material.angular.io/material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/app/pages/guide-list/guide-list.spec.ts

@@ -27,23 +27,4 @@ describe('GuideList', () => {
       .length;
     expect(totalLinks).toEqual(totalItems);
   });
-
-  it('should set the footer below the bottom of the given view', () => {
-    const viewHeight = 1200;
-    const prevHeight = fixture.debugElement.styles['height'];
-    fixture.debugElement.styles['height'] = `${viewHeight}px`;
-    fixture.detectChanges();
-
-    const footer = fixture.nativeElement.querySelector('app-footer');
-    const main = fixture.nativeElement.querySelector('main');
-
-    expect(main.getBoundingClientRect().height)
-      .withContext('main content should take up the full given height')
-      .toBe(viewHeight);
-    expect(main.getBoundingClientRect().height + footer.getBoundingClientRect().height)
-      .withContext('footer should overflow allowed viewport')
-      .toBe(viewHeight + footer.getBoundingClientRect().height);
-
-    fixture.debugElement.styles['height'] = prevHeight;
-  });
 });