fix(tabs): mark tab body as a scrollable container (#16344)

Since the tab body content can be scrollable and consumers don't have access to the DOM element, we have to mark it as a CdkScrollable in order to allow for overlays inside the tabs to reposition.

Fixes #8405.

(cherry picked from commit 24d20fb)

src/material/tabs/tab-body.html

@@ -4,6 +4,7 @@
         params: {animationDuration: animationDuration}
      }"
      (@translateTab.start)="_onTranslateTabStarted($event)"
-     (@translateTab.done)="_translateTabComplete.next($event)">
+     (@translateTab.done)="_translateTabComplete.next($event)"
+     cdkScrollable>
   <ng-template matTabBodyHost></ng-template>
 </div>

src/material/tabs/tab-body.spec.ts

@@ -5,6 +5,8 @@ import {AfterContentInit, Component, TemplateRef, ViewChild, ViewContainerRef} f
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {MatRippleModule} from '@angular/material/core';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
+import {By} from '@angular/platform-browser';
+import {ScrollingModule, CdkScrollable} from '@angular/cdk/scrolling';
 import {MatTabBody, MatTabBodyPortal} from './tab-body';
 import {Subject} from 'rxjs';
 
@@ -178,6 +180,33 @@ describe('MatTabBody', () => {
 
     expect(fixture.componentInstance.tabBody._position).toBe('left');
   });
+
+  it('should mark the tab body content as a scrollable container', () => {
+    TestBed
+      .resetTestingModule()
+      .configureTestingModule({
+        imports: [
+          CommonModule,
+          PortalModule,
+          MatRippleModule,
+          NoopAnimationsModule,
+          ScrollingModule
+        ],
+        declarations: [
+          MatTabBody,
+          MatTabBodyPortal,
+          SimpleTabBodyApp,
+        ]
+      })
+      .compileComponents();
+
+    const fixture = TestBed.createComponent(SimpleTabBodyApp);
+    const tabBodyContent = fixture.nativeElement.querySelector('.mat-tab-body-content');
+    const scrollable = fixture.debugElement.query(By.directive(CdkScrollable));
+
+    expect(scrollable).toBeTruthy();
+    expect(scrollable.nativeElement).toBe(tabBodyContent);
+  });
 });