From 7979897c20e3967cf77c7b2c80b7de7629b3a3e9 Mon Sep 17 00:00:00 2001 From: "ngjunyen@gmail.com" Date: Tue, 2 Jan 2018 00:06:36 +1100 Subject: [PATCH] fix(tabs): scale tabs to the height of tab group --- src/lib/tabs/tab-body.scss | 5 +++++ src/lib/tabs/tab-group.scss | 4 +++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/src/lib/tabs/tab-body.scss b/src/lib/tabs/tab-body.scss index 63daba18ea1a..a0e127070acd 100644 --- a/src/lib/tabs/tab-body.scss +++ b/src/lib/tabs/tab-body.scss @@ -1,6 +1,11 @@ @import '../core/style/vendor-prefixes'; .mat-tab-body-content { + // Avoids repainting while scrolling. + @include backface-visibility(hidden); + display: flex; + flex-direction: column; + flex-grow: 1; height: 100%; overflow: auto; diff --git a/src/lib/tabs/tab-group.scss b/src/lib/tabs/tab-group.scss index c5a148d777fd..dfb48a940fdd 100644 --- a/src/lib/tabs/tab-group.scss +++ b/src/lib/tabs/tab-group.scss @@ -39,13 +39,15 @@ position: relative; overflow: hidden; display: flex; + flex-grow: 1; transition: height $mat-tab-animation-duration $ease-in-out-curve-function; } // Wraps each tab body .mat-tab-body { @include mat-fill; - display: block; + display: flex; + flex-direction: column; overflow: hidden; // Fix for auto content wrapping in IE11