why input-box in the angular flex row get more width than the given width during the initial loading?

Question

<div class="pt-3 mb-4" fxLayout="row" fxLayout.xs="column"  fxLayoutAlign.lt-lg="start start" fxLayoutAlign.xs="start start" >
<div >
  <p [ngClass]="{'book_title_select_responsive': deviceXS}" class="book_title_select"  >All</p>
</div>
<div fxFlex  fxLayout="row" fxLayout.lt-lg="column"  fxLayout.xs="column"  fxLayoutAlign="end center" fxLayoutAlign.xs="start start" fxLayoutGap="10px" class="searchHolder" [ngClass]="{'extraFilterPadding' : deviceXS}">
  <div>
    <app-search-box [data]="bookList" (filterChange)="searchAssignment($event);" filter_type="assignment" [halfScreen]="false"></app-search-box>
  </div>
  <div fxLayout="row" fxLayoutGap="10px">
    <app-generic-filter [data]="lang_list" (filterChange)="filterByLanguage($event);" [filter_type]="'language'" [selectedFilter]="'Language'"></app-generic-filter>
    <app-generic-filter [data]="lexile_fitlers" (filterChange)="filterByLexile($event);" [filter_type]="'generic'" [selectedFilter]="'Lexile'"></app-generic-filter>
  </div>
  <div fxLayout="row" fxLayoutAlign.xs="start start"   fxLayoutGap="10px">
    <app-generic-filter [data]="fountas" (filterChange)="filterByFountas($event);" [filter_type]="'generic'" [selectedFilter]="'Fountas'"></app-generic-filter>
    <!-- <app-generic-filter [data]="reading_assessment" (filterChange)="filterByReadingAssessment($event);"
    [filter_type]="'generic'" [selectedFilter]="'Assessment'"></app-generic-filter> -->

    <app-generic-filter [data]="comprehension_list" (filterChange)="filterByComprehension($event);" [filter_type]="'comprehension'" [selectedFilter]="'Comprehension'"></app-generic-filter>
  </div>
</div> 

During the initial load it's the outlook. But when I refresh the page it will be fine.