logo标签列表

CSS Grid内容溢出

htmlcss
3

我对css grid还不熟悉，正在使用它来构建一个仪表板。

当我填充一个网格元素时，如果视口高度改变，内容就会溢出其容器。我是在把工作带回家后才注意到这一点的。我的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)

如何在屏幕变窄时使内容（即四个健康和安全项目）保持在学习计划网格模板区域内？我知道可以使用媒体查询来实现，但我觉得在这种情况下可能没有正确使用 CSS Grid。谢谢。这里是 Stackblitz 链接，请调整浏览器窗口大小以重现相同的效果。当页面达到特定的高度和宽度时，内容才能适合于该区域。
2
你能否在这里为这段代码创建一个fiddle或者snippet？ - KuldipKoradia
如果你是CSS新手，那么你应该使用flex概念，它对你很有用，而且很容易上手。 - Revti Shah
1
你的HTML中.grid-wrapper在哪里？ - Loi Nguyen Huynh
@PaulLeppard 我应该在 stackblizz 中进行更改吗？ - Revti Shah
@RevtiShah - 如果你认为这会对我有帮助，请帮我做一下。我已经保存了代码。 - Bwizard
显示剩余3条评论
1个回答
4

网格布局列和行的最小宽度和高度默认值为auto。使用 minmax(0, 1fr) 可以避免出现此错误。您还可以将其设置为固定大小，如 100px。

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

这段代码应该可以解决你的问题。

来源

我几个月前就修复了这个问题，但是你付出了努力编写一个可行的答案，所以谢谢你。 - Bwizard
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接