html - Css 网格内容溢出

Question

我是 CSS 网格的新手，正在使用它来构建仪表板。

当我填充其中一个网格元素时，当视口(viewport)高度发生变化时，内容会溢出它的容器。我只是在将工作带回家时才注意到这一点，我的 mac 屏幕比我的工作屏幕更宽但更短。

我的代码是这样的:

.grid-wrapper {
  height: calc(100vh - 75px);
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: 0.25fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-areas: "breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb breadcrumb" "welcome welcome welcome library library library library library library" "learningplan learningplan learningplan library library library library library library" "learningplan learningplan learningplan library library library library library library" "learningplan learningplan learningplan news news news alerts alerts alerts" "learningplan learningplan learningplan news news news alerts alerts alerts";
  color: #444;
}

.dashboard-learning-plan-widget {
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 6px 7.6px -36px rgba(0, 0, 0, 0.08), 0 48px 61px -36px rgba(0, 0, 0, 0.16);
}

<div class="c dashboard-learning-plan-widget">
  <div>
    <div fxLayout="row" fxLayoutAlign="space-between center">
      <h4 class="is-size-5 has-text-weight-semibold">My Learning Plan</h4>
      <p class="is-size-6 has-text-weight-semibold">See all</p>
    </div>
    <div fxLayout="row" class="mtlg mbmd">
      <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': activeTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectActive()">
        <p>Mandatory</p>
        <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div>
      </div>
      <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': completedTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectCompleted()">
        <p>Upcoming</p>
        <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div>
      </div>
      <div fxLayout="column" [ngClass]="{'learning-plan-dashboard-buttons--active': mandatoryTabActive }" class="button mrmd mbmd learning-plan-dashboard-buttons" (click)="selectMandatory()">
        <p>My Plan</p>
        <div class="learning-plan-widget-numberCircle mbmd mtmd">21</div>
      </div>
    </div>
    <mat-tab-group animationDuration="1000ms" [selectedIndex]="selectedIndex">
      <mat-tab label="Mandatory">
        <div fxLayout="column">
          <div fxLayout="row">
            <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory">
              laptop_mac
            </mat-icon>
            <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3>
            <div fxFlex></div>
            <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon>
            <div class="is-size-6 has-text-weight-medium">06/02/2020</div>
          </div>
          <div fxLayout="row">
            <div class="is-size-6half has-text-weight-medium mlsm">Booked</div>
            <div fxFlex></div>
            <mat-icon class="is-size-6">place</mat-icon>
            <div class="is-size-6half has-text-weight-medium">Leeds</div>
          </div>

        </div>
        <hr>
        <div fxLayout="column">
          <div fxLayout="row">
            <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory">
              laptop_mac
            </mat-icon>
            <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3>
            <div fxFlex></div>
            <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon>
            <div class="is-size-6 has-text-weight-medium">06/02/2020</div>
          </div>
          <div fxLayout="row">
            <div class="is-size-6half has-text-weight-medium mlsm">Booked</div>
            <div fxFlex></div>
            <mat-icon class="is-size-6">place</mat-icon>
            <div class="is-size-6half has-text-weight-medium">Leeds</div>
          </div>

        </div>
        <hr>
        <div fxLayout="column">
          <div fxLayout="row">
            <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory">
              laptop_mac
            </mat-icon>
            <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3>
            <div fxFlex></div>
            <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon>
            <div class="is-size-6 has-text-weight-medium">06/02/2020</div>
          </div>
          <div fxLayout="row">
            <div class="is-size-6half has-text-weight-medium mlsm">Booked</div>
            <div fxFlex></div>
            <mat-icon class="is-size-6">place</mat-icon>
            <div class="is-size-6half has-text-weight-medium">Leeds</div>
          </div>

        </div>
        <hr>
        <div fxLayout="column">
          <div fxLayout="row">
            <mat-icon class="material-icons-outlined dashboard-learning-item-icon dashboard-learning-item-icon--mandatory">
              laptop_mac
            </mat-icon>
            <h3 class="is-size-6 has-text-weight-medium mtxxs">Health & Safety</h3>
            <div fxFlex></div>
            <mat-icon class="is-size-6 mtxxs">calendar_today</mat-icon>
            <div class="is-size-6 has-text-weight-medium">06/02/2020</div>
          </div>
          <div fxLayout="row">
            <div class="is-size-6half has-text-weight-medium mlsm">Booked</div>
            <div fxFlex></div>
            <mat-icon class="is-size-6">place</mat-icon>
            <div class="is-size-6half has-text-weight-medium">Leeds</div>
          </div>

        </div>

      </mat-tab> (+ the identical code on the other 2 mat-tabs)

当屏幕变短时，如何使内容(即 4 个健康和安全元素)保留在学习计划网格模板区域内？我知道我可以通过媒体查询来做到这一点，但我觉得在这种情况下我可能没有正确使用 CSS 网格。谢谢

Stackblitz添加。请扩大和缩短浏览器窗口以产生与我相同的效果。只有当页面处于特定高度和宽度时，内容才适合。

Answer 1

网格列和行的最小宽度和高度预设为auto。使用 minmax(0, 1fr) 可防止发生此错误。您还可以将其设置为固定大小，例如 100px。

grid-template-columns: repeat(9, minmax(0, 1fr));
grid-template-rows: 0.25fr repeat(5, minmax(0, 1fr));

此代码应该可以解决您的问题。

Source