如何让我的组件使用 Tailwind 占用所有可用空间？

Question

我使用 Tailwind CSS 来设计 Angular 应用程序的样式。结构很简单：

app.component.html

显示导航栏和页脚，组件用

overflow-y

显示在剩余的可用空间中。

问题：我的组件没有使用

w-full

或

flex-grow

占用所有可用的剩余空间。

app.component.html：

<div class="flex flex-col h-screen w-screen">
  <app-topbar></app-topbar>
    <div class="flex flex-grow overflow-y-auto mx-6 mt-6 bg-red-700">
      <router-outlet></router-outlet>
    </div>
  <app-footer/>
</div>

collection.component.html

<div class="flex h-full w-full bg-amber-400">
  <form [formGroup]="searchForm" *ngIf="(currentBreakpoint$ | async) === Breakpoints.XSmall">
    <mat-form-field appearance="outline" class="">
      <mat-label>Name</mat-label>
      <input matInput placeholder="" [value]="searchForm.value.name" formControlName="name">
    </mat-form-field>
  </form>
  <button mat-raised-button color="primary" (click)="search()" [disabled]="searchForm.invalid">Rechercher</button>
</div>

这里，黄色部分代表

collection.component.html

，它应该占据所有可用的宽度。如果这是因为父宽度未定义，我不知道该怎么做，因为我无法访问标签

<collection.component />

。

Answer 1

您有以下代码包装了应用程序的

router-outlet

，它是

flex

。它还应该有

w-full

，它将解决您的问题。

<div class="flex flex-grow overflow-y-auto mx-6 mt-6 bg-red-700">
  <router-outlet></router-outlet>   
</div>