Использование медиазапроса для отображения: flex и wrap заставляют элементы перекрывать друг друга

Question

Я использую медиа-запрос, который меняет стиль элемента на моей странице с сетки на гибкий, когда ширина браузера меньше 800px.

Я хочу, чтобы дисплей изменился, чтобы я мог go от отображения элементов по горизонтали по всей странице до вертикального расположения страницы друг над другом.

Это работает, но когда гибкий экран берет верх, элементы перекрывают друг друга и не учитывая высоту, необходимую для естественного отображения.

У меня нет параметров высоты на карте, внутри которой находятся элементы, поэтому я не Я не понимаю, почему это происходит.

HTML

<form [formGroup]="locationBuilderForm">
                        <div class="location-builder-card mt-xl">
                            <div class="location-builder-card-grid">
                                <div class="flex-center-space-even include-column">
                                    <mat-label class="switch-label mr-md">
                                        {{ (this.locationBuilderForm.get('include').value ?
                                        getTranslateKey('include') :
                                        getTranslateKey('exclude')) | translate}}
                                    </mat-label>
                                    <mat-slide-toggle [checked]="true" formControlName="include"></mat-slide-toggle>
                                </div>
                                <div class="address-column mt-6">
                                    <mat-form-field appearance="fill">
                                        <mat-icon class="prefix mr-sm" matPrefix>location_on</mat-icon>
                                        <input matInput [placeholder]="getTranslateKey('location') | translate"
                                               formControlName="location" required>
                                    </mat-form-field>
                                </div>
                                <div class="comment-column mt-6">
                                    <mat-form-field appearance="fill">
                                        <mat-icon class="prefix mr-sm" matPrefix>comment</mat-icon>
                                        <input matInput
                                               [placeholder]="getTranslateKey('locationComment') | translate"
                                               formControlName="locationComment" autocomplete="off">
                                    </mat-form-field>
                                </div>
                                <div class="button-column flex-center">
                                    <div class="ml-md">
                                        <button mat-button (click)="addIp()"
                                                [disabled]="locationBuilderForm.invalid || isPolicyLocked || readonly">
                                            <mat-icon>add</mat-icon>
                                            {{getTranslateKey("addIp") | translate}}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>

CSS

.location-builder-card{
  background-color: #e0ebef;
  box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
  border-radius: 4px;
  padding: 32px 32px 32px 32px;
  mat-icon.prefix {
    color: #498bb9;
    position: relative;
    top: 4px;
  }

  .location-builder-card-grid{
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    //grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    grid-column-gap: 16px;
    width: 100%;

    .include-column{
      grid-area: 1 / 1 / 1 / 1;
    }

    .address-column{
      grid-area: 1 / 2 / 1 / 6;
    }

    .comment-column{
      grid-area: 1 / 6 / 1 / 10;
    }

    .button-column{
      grid-area: 1 / 10 / 1 / 10;
    }
  }

}

@media only screen and (max-width: 800px) {
  .location-builder-card{
    padding: 8px 16px 8px 16px;

    .location-builder-card-grid{
      display: flex;
      flex-wrap: wrap;

      .include-column{
        flex: 1 0 100%;
      }

      .address-column{
        flex: 1 0 100%;
        margin-top: 8px;
      }

      .comment-column{
        flex: 1 0 100%;
        margin-top: 8px;
      }

      .button-column{
        flex: 1 0 100%;
      }
    }
  }
}