title: How to remove scrollbar from Mat-tab or Mat-card (Angular Material)
body: <p>I currently have a card <code>(mat-card)</code> that inside has 2 tabs (Now you only see one tab, but the idea is to fix this problem to add the other one; which will have the same content but will serve as an example since it is only Lorem Ipsum text for the moment), what I do not find how to do is <strong>remove the scrollbar</strong> and that <strong>the content just keeps stretching down the card</strong>.</p>
  <p><a href="https://i.stack.imgur.com/yZfh8.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/yZfh8.gif" alt="Scrollbar issue" /></a>
  I'm using Angular 5 and of course Angular Material 5.</p>
  <p>I have tried several things that I found through Google and StackOverflow, none of them worked for me. I'm using Flexbox for the grid system.</p>
  <p>My lorem.component.html code:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;content-padder content-background&quot;&gt;
    &lt;div class=&quot;uk-section-small uk-section-default header&quot;&gt;
      &lt;div class=&quot;uk-container uk-container-large uk-animation-slide-top-medium&quot;&gt;
        &lt;h1&gt;&lt;span uk-icon=&quot;credit-card&quot;&gt;&lt;/span&gt; Lorem&lt;/h1&gt;
  
        &lt;p&gt;Lorem&lt;/p&gt;
        &lt;ul class=&quot;uk-breadcrumb&quot;&gt;
          &lt;li&gt;&lt;a href=&quot;#&quot;&gt;Lorem&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span href=&quot;&quot;&gt;Lorem&lt;/span&gt;&lt;/li&gt;
          &lt;li&gt;&lt;span href=&quot;&quot;&gt;Lorem&lt;/span&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class=&quot;uk-section-small content-padder content-background&quot;&gt;
      &lt;div class=&quot;container&quot;&gt;
        &lt;mat-card&gt;
            &lt;div class=&quot;mat-tab-fix&quot;&gt;
              &lt;mat-tab-group&gt;
                  &lt;mat-tab class=&quot;tabs&quot; label=&quot;Tab 1&quot;&gt;
  
                          &lt;h2 style=&quot;padding-top: 30px;&quot;&gt;
                              &lt;span&gt;Lorem&lt;/span&gt;
                            &lt;/h2&gt;
  
            &lt;div class=&quot;card-layout&quot;&gt;
              &lt;div class=&quot;card-column-1&quot;&gt;
  
                &lt;mat-form-field hideRequiredMarker&gt;
                    &lt;input matInput placeholder=&quot;Importe Recarga&quot; required/&gt;
                    &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Ingresa el importe a recargar&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;mat-form-field&gt;
                    &lt;mat-select placeholder=&quot;Lorem&quot;&gt;
                      &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                      &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                      &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                      &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                    &lt;/mat-select&gt;
                    &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                  &lt;/mat-form-field&gt;
  
                  &lt;mat-form-field hideRequiredMarker&gt;
                    &lt;input matInput placeholder=&quot;Lorem&quot; required/&gt;
                    &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                  &lt;/mat-form-field&gt;
  
              &lt;/div&gt;
  
              &lt;div class=&quot;card-column-2&quot;&gt;
                    &lt;mat-form-field&gt;
                        &lt;mat-select placeholder=&quot;Lorem Canal&quot;&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                        &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Selecciona el Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                      &lt;/mat-form-field&gt;
  
                      &lt;mat-form-field&gt;
                        &lt;mat-select placeholder=&quot;Lorem&quot;&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                        &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;+&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                      &lt;/mat-form-field&gt;
  
                      &lt;mat-form-field&gt;
                        &lt;mat-select placeholder=&quot;Lorem&quot;&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                          &lt;mat-option value=&quot;option&quot;&gt;Lorem&lt;/mat-option&gt;
                        &lt;/mat-select&gt;
                        &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Selecciona el tipo de operativa&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                      &lt;/mat-form-field&gt;
              &lt;/div&gt;
  
              &lt;div class=&quot;card-column-3&quot;&gt;
                  &lt;mat-form-field hideRequiredMarker&gt;
                      &lt;input matInput placeholder=&quot;Lorem&quot; required/&gt;
                      &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                    &lt;/mat-form-field&gt;
  
                    &lt;mat-form-field hideRequiredMarker&gt;
                      &lt;input matInput placeholder=&quot;Lorem&quot; required/&gt;
                      &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                    &lt;/mat-form-field&gt;
  
                    &lt;mat-form-field hideRequiredMarker&gt;
                      &lt;input matInput placeholder=&quot;Lorem&quot; required/&gt;
                      &lt;mat-hint align=&quot;start&quot; matTooltip=&quot;Lorem&quot;&gt;&lt;p&gt;+ Info&lt;/p&gt;&lt;/mat-hint&gt;
                    &lt;/mat-form-field&gt;
                    &lt;div class=&quot;button-row&quot;&gt;&lt;/div&gt;
  
                    &lt;button mat-raised-button end color=&quot;primary&quot; matTooltip=&quot;Lorem&quot;&gt;
                        Lorem
                    &lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
  
            &lt;mat-list&gt;
                &lt;mat-list-item&gt; &lt;h2&gt;Lorem&lt;/h2&gt;&lt;/mat-list-item&gt;
                &lt;mat-divider&gt;&lt;/mat-divider&gt;
              &lt;/mat-list&gt;
  
            &lt;/mat-tab&gt;
          &lt;/mat-tab-group&gt;
          &lt;/div&gt;
  
            &lt;/mat-card&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My lorem.component.css code:</p>
  <pre class="lang-css prettyprint-override"><code>.header {
    padding-top: 3.34vh;
    box-sizing: border-box;
    border-bottom: 1px #e5e5e5 solid;
  }
  .content-padder {
    margin-left: 0px;
  }
  .content-background {
    min-height: calc(100% - 80px);
    background-color: #F0F0F0;
  }
  
  /* Sizes and distances of Inputs */
  .mat-form-field {
    padding-top: 2vh;
    width: 100%;
  }
  
  .button-row {
    padding-top: 3.34vh;
  }
  
  .mat-tab-fix {  /* Fix to the tab problem (El scroll subía al clickar en alguna de las tabs) */
    min-height:800px;
  }
  
  /* Flexbox styles for Cards and Columns */
  
  .card-layout {
    max-width: 1000px;
    background-color: #ffffff;
    margin:  auto;
    /* line-height: 1.65; */
    padding: 20px 10px;
    display: flex;
    justify-content: space-between;
  }
  
  .card-column-1 {
    flex: 1;
    padding: 10px;
  
    margin-bottom: 20px;
    flex-basis: 30%;
  }
  
  .card-column-2 {
    flex: 1;
    padding: 10px;
  
    margin-bottom: 20px;
    flex-basis: 30%;
  }
  
  .card-column-3 {
    flex: 1;
    padding: 10px;
  
    margin-bottom: 20px;
    flex-basis: 30%;
  }
  
  /* .box {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      -webkit-transform: translate(-50%,-50%);
      -moz-transform: translate(-50%,-50%);
      width:640px;
      text-align:center;
  } */
  
  /deep/ .mat-tab-body {  /* Removing the scrollbar from the Tabs card */
    overflow-y: hidden !important;
  }
  
  .mat-tab-body-content {
    height: 100%;
  </code></pre>