feat(mat-tab): ability to set mat-tab height to grow to fill available area within mat-tab-group

[rars]

Feature Description

Currently, the best solution I've found is to override:

::ng-deep .mat-mdc-tab-body-wrapper { flex-grow: 1; }

See this reproduction.

If flex-grow: 1 was added to the body wrapper or an API option provided that allowed that behaviour without using ::ng-deep, that would be great. Thanks.

Use Case

Situations where I want a tab group to occupy the full height available and have its contents expand to the available height. E.g. a table or text editing component inside a tab that is scrollable but should occupy as much of the height available as possible.

[andrewseguin]

Isn't this the same as using the input dynamicHeight?

[rars]

I didn't think so, although I am a little confused about what dynamicHeight is - it seems to animate the height if the height changes between tabs.

In my reproduction, if I change to dynamicHeight and remove the flex-grow: 1;, I still have the same problem I described. What I'm trying to accomplish is having the tab group occupy 100% of its parent's height and then have the tab content grow to as large as it can with that tab-group's height.

[notchris]

I am also having this issue. I cannot seem to get the tab body to grow to fit content.

[doliG]

Got the same issue as described in OP.

The described workaround works fine but I agree with @rars that we should have a way to achieve it without ng-deep.

[ldu2]

Any news on this?

[doliG]

Agree, it's not because it's a P4 that it should be forgotten for years.

Please take this issue into account or at least give visibility @mmalerba (& angular team).