如何从 Mat-tab 或 Mat-card（Angular Material）中删除滚动条

Question

已解决问题：只需添加dynamicHeight到<mat-tab-group>

我目前有一张卡片(mat-card)，里面有 2 个标签（现在你只能看到一个标签，但想法是解决这个问题以添加另一个；这将具有相同的内容，但将作为一个例子，因为它只是 Lorem Ipsum暂时文本），我不知道如何做的是删除滚动条并且内容只是不断向下拉伸卡片。

我正在使用 Angular 5，当然还有 Angular Material 5。

我尝试了通过 Google 和 StackOverflow 找到的几件事，但没有一个对我有用。我在网格系统中使用 Flexbox。

我的 lorem.component.html 代码：

<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>

我的 lorem.component.css 代码：

.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

根据 OP 对此答案的评论：

只需添加dynamicHeight到mat-tab-group.

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

Answer 2

默认情况下，mat-list-item 内的 h2 元素有一些边距，该边距延伸到 mat-list 元素之外并导致额外的滚动条。删除 h2 或覆盖 margin-bottom 样式将解决该问题：

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

或者

<mat-list>
    <mat-list-item><h2 style="margin-bottom: 0;">Lorem</h2></mat-list-item>
    <mat-divider></mat-divider>
</mat-list>