flex row still breaks line when shrinking screen

I have a card item which contains 3 rows, looking like this:

Everything looks fine. The third element of the first row (the address) is set to overflow: hidden since it can be very long.

Well, when I reduce the width of my screen, it looks like this:

The first row divides into two rows and it looks like the last item "Prio: 3" is the cause.

However, I use overflow and flex-wrap: wrap so it is unclear to me why it happens.

This is the relevant html:

<div class="row1">
  <div *ngIf="einsatz?.nummerFormatiert" class="item">
      <kendo-svg-icon
        [icon]="icons.favorit"
        [ngClass]="{'icon-favorit': einsatz?.favorit === 'ja'}"
        (click)="onEinsatzFavorit(einsatz?.id)"
      ></kendo-svg-icon>
    <span class="card-title-item">{{ einsatz?.nummerFormatiert }}</span>
  </div>

  <div *ngIf="einsatz?.status" class="file-item">
    <kendo-svg-icon
      class="file-icon"
      [icon]="icons.file"
    ></kendo-svg-icon
    ><span class="card-title-item">{{ einsatz?.anlassartKurzbezeichnung }}</span>
  </div>

  <div *ngIf="einsatz?.einsatzort" class="ort-item">
    <kendo-svg-icon
      class="map-icon"
      [icon]="icons.mapMarker"
    ></kendo-svg-icon
    ><span class="card-title-item ort-item">{{ einsatz?.einsatzort }}</span>
  </div>

  <div *ngIf="einsatz?.prioritaet" class="end-item">
    <span class="card-title-item">Prio: {{ einsatz?.prioritaet }}</span>
  </div>
</div>

and the css:

.row1 {
  display: flex;
  font-weight: bold;
  margin-top: 16px;
  margin-bottom: 1.5px;
  flex-wrap: wrap;
}

.file-item {
  margin-right: 14px;
  margin-bottom: 2px;
}

.end-item {
  margin-left: auto;
  margin-right: 16px;
}

.file-icon {
  transform: scale(0.67);
  margin-right: 6px;
  margin-bottom: 2px;
}

.map-icon {
  transform: scale(0.625);
  margin-right: 6px;
  margin-bottom: 2px;
}

:host ::ng-deep .k-svg-i-favorit { //this is the star icon at the beginning
  transform: scale(0.8);
  margin-right: 5.5px;
  margin-left: -1px;
  margin-bottom: 3.5px;
}

.ort-item {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 65%;
}

Does anyone know why this is appening and how to fix it? Thank you!