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 73bef2b)
angular · Aug 6, 2021 · 5d0ad3b · 5d0ad3b
1 parent 48b7ae7
commit 5d0ad3b
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git 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
@@ -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;
   }