Title: Angular Material Scrollbar on Card Content Enclosed in a Tab
Tags: html;css;angular-material;scrollbar
Question: Please help with a problem I'm having styling angular material tabs.

See:  https://stackblitz.com/edit/angular-6-material-tab-problem?file=app/tab.component.html
[Edit:  The stackblitz example is working as expected after making the changes that I noted in my answer]

The first tab is close to how I'd like it:


Overflow-y scrollbar is available when content in mat-card-content
exceeds visible space in tab. 
No scrollbars on the mat-card or mat-tab Should be able to
appropriately resize.  
On window resize, for example, the height of the mat-tab-group could
grow taller -- the mat-card-content should also grow taller and be
scrollable, if needed.




There is a problem though when the length of the contents in the mat-card-content don't exceed the height of the tab.

For example, with the same styling though, the second tab isn't right.  The red rectangle of the mat-card should fill the height of the mat-tab.  There is also a scrollbar on the far right which isn't needed.



Here is the template:

```<mat-tab-group&gt;
  <mat-tab label="Properties"&gt;
    <mat-card class="scrollable-content"&gt;
      <mat-card-header&gt;
          <mat-card-title&gt;Card Data</mat-card-title&gt;
      </mat-card-header&gt;
      <mat-card-content&gt;
          My Content for this card...<br&gt;
          0 Lots and lots of content.<br&gt;
          1 Lots and lots of content.<br&gt;
          2 Lots and lots of content.<br&gt;
          3 Lots and lots of content.<br&gt;
          4 Lots and lots of content.<br&gt;
          5 Lots and lots of content.<br&gt;
          6 Lots and lots of content.<br&gt;
          7 Lots and lots of content.<br&gt;
          8 Lots and lots of content.<br&gt;
          9 Lots and lots of content.<br&gt;
          10 Lots and lots of content.<br&gt;
          11 Lots and lots of content.<br&gt;
          12 Lots and lots of content.<br&gt;
          13 Lots and lots of content.<br&gt;
          14 Lots and lots of content.<br&gt;
          15 Lots and lots of content.<br&gt;
          16 Lots and lots of content.<br&gt;
          17 Lots and lots of content.<br&gt;
          18 Lots and lots of content.<br&gt;
          19 Lots and lots of content.<br&gt;
          20 Lots and lots of content.<br&gt;
          21 Lots and lots of content.<br&gt;
          22 Lots and lots of content.<br&gt;
          23 Lots and lots of content.<br&gt;
      </mat-card-content&gt;
    </mat-card&gt;
  </mat-tab&gt;
  <mat-tab label="2nd Tab"&gt;
    <mat-card  class="scrollable-content"&gt;
      <mat-card-header&gt;
          <mat-card-title&gt;Other Stuff</mat-card-title&gt;
      </mat-card-header&gt;
      <mat-card-content&gt;
        2nd Tab
      </mat-card-content&gt;
    </mat-card&gt;
  </mat-tab&gt;
</mat-tab-group&gt;
```

And here is the CSS:

```.mat-card.scrollable-content{
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.mat-card.scrollable-content mat-card-content {
    overflow-y: auto;
}
.mat-card.scrollable-content mat-card-title {
    display: block;
}

.mat-tab-group {
  height: 400px;
  border: 2px solid #00F;
}

.mat-card-content {
  border: 2px solid #0F0
}
.mat-card-title {
  font-weight: bold;
  font-size: 1.25em !important;
}
.mat-card {
  border: 2px solid #F00;
  height: 85%;
}

.mat-tab-label{
  font-weight: bold;
  font-size: 1.25em;
}
```


Here is the accepted answer: I was able to solve the problem after realizing that the material design elements used in the template get preprocessed into other css classes.

I got it working by adding the following to the css:

```.mat-tab-body-content {
  overflow: hidden !important;
}

.mat-tab-body-wrapper {
  height: 100% !important;
}
```



{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2020:00:06/06/20', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<html><css><angular-material><scrollbar>', 'Title': 'Angular Material Scrollbar on Card Content Enclosed in a Tab', 'ViewCount': 1121, 'id': 62237323, 'user_AboutMe': None, 'user_AccountId': 543847.0, 'user_DisplayName': 'George Hernando', 'user_Reputation': 2530.0, 'user_Views': 252.0, 'user_id': 913102.0}}