How to remove scrollbar from Mat-tab or Mat-card (Angular Material)

Question

I currently have a card (mat-card) 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 remove the scrollbar and that the content just keeps stretching down the card.

I'm using Angular 5 and of course Angular Material 5.

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.

My lorem.component.html code:

<div class="content-padder content-background">
  <div class="uk-section-small uk-section-default header">
    <div class="uk-container uk-container-large uk-animation-slide-top-medium">
      <h1><span uk-icon="credit-card"></span> Lorem</h1>

      <p>Lorem</p>
      <ul class="uk-breadcrumb">
        <li><a href="#">Lorem</a></li>
        <li><span href="">Lorem</span></li>
        <li><span href="">Lorem</span></li>
      </ul>
    </div>
  </div>
  <div class="uk-section-small content-padder content-background">
    <div class="container">
      <mat-card>
          <div class="mat-tab-fix">
            <mat-tab-group>
                <mat-tab class="tabs" label="Tab 1">

                        <h2 style="padding-top: 30px;">
                            <span>Lorem</span>
                          </h2>

          <div class="card-layout">
            <div class="card-column-1">

              <mat-form-field hideRequiredMarker>
                  <input matInput placeholder="Importe Recarga" required/>
                  <mat-hint align="start" matTooltip="Ingresa el importe a recargar"><p>+ Info</p></mat-hint>
                </mat-form-field>

                <mat-form-field>
                  <mat-select placeholder="Lorem">
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                    <mat-option value="option">Lorem</mat-option>
                  </mat-select>
                  <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                </mat-form-field>

                <mat-form-field hideRequiredMarker>
                  <input matInput placeholder="Lorem" required/>
                  <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                </mat-form-field>

            </div>

            <div class="card-column-2">
                  <mat-form-field>
                      <mat-select placeholder="Lorem Canal">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Selecciona el Lorem"><p>+ Info</p></mat-hint>
                    </mat-form-field>

                    <mat-form-field>
                      <mat-select placeholder="Lorem">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Lorem">+<p>+ Info</p></mat-hint>
                    </mat-form-field>

                    <mat-form-field>
                      <mat-select placeholder="Lorem">
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                        <mat-option value="option">Lorem</mat-option>
                      </mat-select>
                      <mat-hint align="start" matTooltip="Selecciona el tipo de operativa"><p>+ Info</p></mat-hint>
                    </mat-form-field>
            </div>

            <div class="card-column-3">
                <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>

                  <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>

                  <mat-form-field hideRequiredMarker>
                    <input matInput placeholder="Lorem" required/>
                    <mat-hint align="start" matTooltip="Lorem"><p>+ Info</p></mat-hint>
                  </mat-form-field>
                  <div class="button-row"></div>

                  <button mat-raised-button end color="primary" matTooltip="Lorem">
                      Lorem
                  </button>
            </div>
          </div>

          <mat-list>
              <mat-list-item> <h2>Lorem</h2></mat-list-item>
              <mat-divider></mat-divider>
            </mat-list>

          </mat-tab>
        </mat-tab-group>
        </div>

          </mat-card>
  </div>
</div>

My lorem.component.css 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%;

Answer 1

Originally from the OP's comment on this answer:

Just add dynamicHeight [attribute] to mat-tab-group.

<mat-tab-group dynamicHeight></mat-tab-group>

Answer 2

I Tried and it worked for me.

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