Карта leaflet, при уменьшении становится меньше блока в котором находится

Карта leaflet на VUE отображается не корректно, при уменьшении карты она становится меньше блока в котором находится, в чём может быть проблема?

<template>
  <transition name="fade">
    <main role="main">
      <section class="section section-flight-info">
        <div class="info-flight">
         <l-map
        style="width: 100%; height: 100%; z-index: 1"
        ref="mainMap"
        :zoom="mapProperties.zoom"
        :crs="mapProperties.crs"
        :center="mapProperties.center"
        :options="{
          attributionControl: false,
          minZoom: 2,
          maxZoom: 6,
          zoomControl: false,
        }"
        @ready="onMapReady"
      >
        <l-tile-layer
          :url="mapProperties.url"
          :tileSize="256"
          :no-wrap="true"
          :continuousWorld="false"
          :options="{
            tileSize: 256,
            noWrap: true,
          }"
        ></l-tile-layer>
        <l-marker
          v-for="city in mapProperties.cities"
          :lat-lng="city.coords"
          :key="city.iata"
        >
          <l-icon
            :icon-size="[20, 20]"
            :icon-anchor="[10, 10]"
            icon-url="/map/city_pin9.png"
          >
            <img
              class="minimap-city-point-img"
              src="/map/city_pin9.png"
            /><span class="minimap-city-point">{{ city.name }}</span>
          </l-icon>
        </l-marker>
        <l-feature-group ref="mapFeatures">
          <l-marker
            :lat-lng="mapProperties.markerAircraft"
            :icon="mapProperties.icon"
          ></l-marker>
          <l-marker
            v-for="waypoint in mapProperties.waypoints"
            :lat-lng="waypoint.coords"
            :key="waypoint.airport_iata"
            :icon="mapProperties.waypointIcon"
          >
            <l-icon
              :icon-size="[20, 20]"
              :icon-anchor="[10, 10]"
              icon-url="/map/airport_pin20.png"
            >
              <img
                class="imgRoutePoint"
                src="/map/airport_pin20.png"
              /><span class="map-route-point">{{
                waypoint.city_name
              }}</span>
            </l-icon>
          </l-marker>
          <l-polyline
            ref="mapTrail"
            :lat-lngs="mapProperties.trail"
            :color="mapProperties.trailColor"
            :opacity="1"
            :weight="3"
          ></l-polyline>
        </l-feature-group>
      </l-map>

....

 <script>
     import { mapActions, mapState } from "vuex";
     import flight from "@/mixins/flight";

     import { LatLng, CRS, icon } from "leaflet";
     import "leaflet.geodesic";
     import "leaflet/dist/leaflet.css";
     import {
       LMap,
       LTileLayer,
       LMarker,
       LPolyline,
       LFeatureGroup,
       LIcon,
          } from "vue2-leaflet";
             import { GeodesicLine } from "leaflet.geodesic";

 // import Map from "@/components/Map";

 export default {
   name: "FlightInfo",
      components: {
         LMap,
         LTileLayer,
         LMarker,
         LPolyline,
         LFeatureGroup,
         LIcon,
    }

...