leaflet map doesn't render properly in stepper from mdb

Question

I've integrated different leaflet-maps from ngx-leaflet successfully in my angular project. Now I've got the following problem: For css I'm using additionally Material Design for Bootstrap (mdb) and at one point I have to use a stepper. The stepper is a component of mdb and I need to render the leaflet map inside a step of the stepper. But the stepper doesn't load properly in css and functionality. I have added a picture of it to this question.

I think this is because the steps of the stepper change their size when going from one to another step. But I just don't know how to fix this. I tried rendering the map & set the size again, when the related step is active,but this doesn't work. Also a common solution with the function invalidateSize(); from the leaflet map doesn't work for me.

Can you please help me? Thanks a lot in advance!

This is my html:

<mdb-stepper #stepper class="custom-stepper" (window:resize)="stepperOrientation()" [vertical]="vertical"
        [linear]="true">
...
<mdb-step #standortStep name="Standort">
    <ng-container *ngIf="standortStep.isActive">
        <div class="row m-0 mt-4">
            <mdb-card class="location-title p-2 w-100">
                Titel
            </mdb-card>
        </div>
        <div class="row m-0 px-2">
            <div class="create-map-wrapper">
                <div leaflet class="create-map" [leafletCenter]="center" [leafletFitBounds]="fitBounds"
                [leafletBaseLayers]="baseLayers" [leafletLayers]="markers" (leafletClick)="mapClicked($event)"
                *ngIf="standortStep.isActive">
                </div>
            </div>
        </div>
    </ng-container>
</mdb-step>
...
</mdb-stepper>

And this is my css:

.create-map-wrapper {
  width: 100%;
  .create-map {
    height: 30vh;
  }
}

Added: Some parts of the laysers a shown properly but the majority of the map is grey and I cant't interact with the map in way I should. When I zoom with the mouse it's like that: