剑道网格在宽度过大时不显示某些列

在我的棱角分明的项目中,我使用剑道网格。它看起来是这样的:

这是相关的代码。html格式:

<mat-card class="f-layoutcard lage-table">
      <kendo-grid
        class="f-table f-searchable"
        [data]="mitarbeiterListForKendoGrid"
        [loading]="loading$ | async"
        [scrollable]="'scrollable'"
        [selectable]="selectableSettings"
        #kendoGridInstance="kendoGrid"
      >
        <kendo-grid-column field="name" title="Nutzername" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column field="vorname" title="Vorname" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column field="nachname" title="Nachname" [width]="150">
        </kendo-grid-column>

        <kendo-grid-column
          field="einsatzOeName"
          title="Einsatz-OE"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="dienstgradName"
          title="Dienstgrad"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="baoStandardFunktionName"
          title="Standardfunktion"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column
          field="name"
          title="BAO-Organisation"
          [width]="150"
        >
        </kendo-grid-column>

        <kendo-grid-column field="name" title="Aktion" [width]="150">
        </kendo-grid-column>

        <sh-util-kendo-grid-custom-messages>
        </sh-util-kendo-grid-custom-messages>
        <kendo-grid-messages
          noRecords="Keine Datensätze verfügbar."
        ></kendo-grid-messages>
      </kendo-grid>
    </mat-card>

CSS格式:

.lage-table {
  overflow-x: scroll; // my goal here was to make the grid horizontally scrollable
}

::ng-deep .f-table {
  min-width: 100%;
}

请注意,第一个可见列是“Nachname”。但它应该以“Nutzername”和“Vorname”开头。

如果删除所有列的宽度,则所有列都将可见(但被压扁)。这就是为什么我添加了宽度和CSS来适应一切。

但是在设置了宽度之后,我可以在元素外部的左侧的开发人员控制台中看到真正的前两列。

我想知道为什么会这样,希望有人能帮助修复它,这样每一个专栏都会被展示出来。

编辑:也许我应该提到这是屏幕: