I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow-y.
However, I am encountering an issue where my component is not taking up all the available remaining space despite using w-full or flex-grow.
This is what my app.component.html looks like:
<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>
And here's a snippet from 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>
The section highlighted in yellow denotes the collection.component.html, which should occupy all the available width. If this issue stems from undefined parent width, I'm uncertain how to address it since I cannot access the tag <collection.component />.
https://i.stack.imgur.com/pZ03l.png
UPDATE: While using w-[calc(100vw-48px)] (100% of viewport width minus some margins) instead of w-full resolves the problem, I want to avoid relying on such calculations, as margin values may change with media queries.