From 5d0ad3b8062d6956645acb1a181b1b0302df99d7 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Fri, 6 Aug 2021 20:43:07 +0200
Subject: [PATCH] fix(material/tabs): pagination not working inside flex
 container (#23160)

Fixes that the tab header doesn't collapse inside a flex container which prevents it from showing the pagination.

Fixes #23157.

(cherry picked from commit 73bef2becda15813d74a979626a8864ea517545d)
---
 src/material-experimental/mdc-tabs/tab-group.scss | 3 +++
 src/material/tabs/tab-group.scss                  | 3 +++
 2 files changed, 6 insertions(+)

diff --git a/src/material-experimental/mdc-tabs/tab-group.scss b/src/material-experimental/mdc-tabs/tab-group.scss
index 0e9be9e73040..fbe2785a0964 100644
--- a/src/material-experimental/mdc-tabs/tab-group.scss
+++ b/src/material-experimental/mdc-tabs/tab-group.scss
@@ -27,6 +27,9 @@
   display: flex;
   flex-direction: column;
 
+  // Fixes pagination issues inside flex containers (see #23157).
+  max-width: 100%;
+
   &.mat-mdc-tab-group-inverted-header {
     flex-direction: column-reverse;
 
diff --git a/src/material/tabs/tab-group.scss b/src/material/tabs/tab-group.scss
index 49b08b2d58db..4d423dde39ed 100644
--- a/src/material/tabs/tab-group.scss
+++ b/src/material/tabs/tab-group.scss
@@ -7,6 +7,9 @@
   display: flex;
   flex-direction: column;
 
+  // Fixes pagination issues inside flex containers (see #23157).
+  max-width: 100%;
+
   &.mat-tab-group-inverted-header {
     flex-direction: column-reverse;
   }