How make my component take all available space with Tailwind?

Question

I use Tailwind CSS to style an Angular app. Structure is simple: app.component.html to display a navigation bar and a footer, and components are displayed in the remaining available space with overflow-y.

Problem: my component is not taking all the available remaining space using w-full or 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>

Here, the yellow part represents collection.component.html and it should take all the available width. If this is because the parent width is not defined, I don't know how to do it as I can't access the tag <collection.component />.

EDIT: if I use w-[calc(100vw-48px)] (100% of view width minus some of margins) instead of w-full, it works, but I want to avoid this kind of calculation as margin will change with media queries

Answer 1

You have the following code wrapping your app's router-outlet and it is flex. It should also have w-full and it'll fix your issue.

Instead of:

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

Do this:

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