I get what’s shown in the screenshot

<div class="p-[15px] h-screen">
  <div class="flex justify-end size-full">
    <div class="size-full w-[20%]">
      <div class="flex flex-col space-y-[15px] h-full">
        <app-user-budget-info></app-user-budget-info>
        <app-transactions class="grow"></app-transactions>
      </div>
    </div>
  </div>
</div>

The markup of the component:

<div
  class="border border-[#005CBB] px-[10px] rounded-xl overflow-hidden h-full max-h-full"
>
  <div class="flex flex-col justify-between h-full">
    <div>
      <button
        (click)="createTransaction()"
        mat-button
        class="flex items-center w-full"
      >
        <mat-icon>add</mat-icon>
        <span>Create a new transaction</span>
      </button>
    </div>
    <hr />
    <div class="grow overflow-y-auto border border-red-500">
      @for (transaction of transactions; track transaction) {
      <app-transaction
        (deleteTransactionEvent)="deleteTransaction(transaction)"
        [transaction]="transaction"
      ></app-transaction>
      }
    </div>
    <hr />
    <div>
      <mat-paginator
        (page)="pageHandler($event)"
        [length]="userTranactionQuantity"
        [pageSize]="packSize"
        [hidePageSize]="true"
        [showFirstLastButtons]="true"
      ></mat-paginator>
    </div>
  </div>
</div>

The markup of the :

<div
  class="border border-[#005CBB] my-[10px] p-[10px] w-full overflow-hidden rounded-xl hover:bg-[#d8e4fc]/[.5] hover:cursor-pointer"
>
  <div class="flex items-center justify-between">
    <p class="!mb-0 w-full truncate text-ellipse max-w-full">
      {{ transaction?.title }}
    </p>
    <div class="flex items-center">
      <button (click)="openTransactionEditingDialog()">
        <mat-icon class="text-[#005CBB]">edit</mat-icon>
      </button>
      <button (click)="deleteTransaction()">
        <mat-icon class="text-[#005CBB]">delete</mat-icon>
      </button>
    </div>
  </div>
  <hr />
  @if (transaction?.transactionType === 'income') {
  <span class="text-green-500"
    >+{{ transaction?.significance | currency }}</span
  >
  } @else {
  <div class="flex justify-between">
    <span class="text-red-500"
      >-{{ transaction?.significance | currency }}</span
    >
    <span>{{ transaction?.category?.title }}</span>
  </div>
  }
  <hr />
  <div class="flex items-center justify-between my-[5px]">
    <span>Created:</span>
    <span>{{
      transactionDateService.formatDate(
        transaction?.createdAt!.toLocaleString()
      )
    }}</span>
  </div>
  @if (transaction?.transactionType === 'expense') {
  <div class="flex items-center justify-between">
    <span>Apply:</span>
    <span>{{
      transactionDateService.formatDate(
        transaction?.expenseDate!.toLocaleString()
      )
    }}</span>
  </div>
  }
</div>

The project uses angular-material and tailwind ui

What could go wrong?

I expect the height of the component with the red border to be unchanged and if there is content inside that is taller than the height of this div a scroll bar will appear