diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts
index 186a30da0e29..52b296ebfe15 100644
--- a/src/material/tabs/paginated-tab-header.ts
+++ b/src/material/tabs/paginated-tab-header.ts
@@ -192,7 +192,8 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
     // On dir change or window resize, realign the ink bar and update the orientation of
     // the key manager if the direction has changed.
     merge(dirChange, resize, this._items.changes).pipe(takeUntil(this._destroyed)).subscribe(() => {
-      realign();
+      // We need to defer this to give the browser some time to recalculate the element dimensions.
+      Promise.resolve().then(realign);
       this._keyManager.withHorizontalOrientation(this._getLayoutDirection());
     });
 
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
index 162c09870bb1..22d029a3ddd5 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.spec.ts
@@ -142,27 +142,29 @@ describe('MatTabNavBar', () => {
       expect(tabLinkElement.classList).toContain('mat-tab-disabled');
     });
 
-    it('should re-align the ink bar when the direction changes', () => {
+    it('should re-align the ink bar when the direction changes', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       dirChange.next();
+      tick();
       fixture.detectChanges();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
-    it('should re-align the ink bar when the tabs list change', () => {
+    it('should re-align the ink bar when the tabs list change', fakeAsync(() => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;
 
       spyOn(inkBar, 'alignToElement');
 
       fixture.componentInstance.tabs = [1, 2, 3, 4];
       fixture.detectChanges();
+      tick();
 
       expect(inkBar.alignToElement).toHaveBeenCalled();
-    });
+    }));
 
     it('should re-align the ink bar when the tab labels change the width', done => {
       const inkBar = fixture.componentInstance.tabNavBar._inkBar;