为什么l-map标签会覆盖v-navigation-drawer，vuetify？

Question

早上好， 这样，我将模板放在一个组件中。

<template>
    <v-card fluid>
        <div class="text-xs-center">
            <v-btn outline small fab color="indigo" @click="abrirmodalBusqueda()">
              <v-icon>search</v-icon>
            </v-btn>
        </div>
        <div id="map">
            <l-map style="height: 500px; width: 100%" :zoom="zoom" :center="center" @update:center="centerUpdate">
                <l-tile-layer :url="url"></l-tile-layer>
                <l-marker :lat-lng="marker" >
                    <l-popup>Estoy en estas coordenadas asadsad {{latitud}}</l-popup>
                </l-marker>

                <l-marker v-for="marker in markers" :lat-lng="marker">
                    <l-popup>Estoy en estas coordenadas asadsad {{marker.lat}}
                        <v-flex xs12 sm4 text-xs-center>
                            <div>
                                <v-btn small color="primary" @click="dialogParqueos = true">Seleccionar</v-btn>
                            </div>
                        </v-flex>
                    </l-popup>
                </l-marker>
            </l-map>
        </div>
    </v-card>
</template>

当使用height属性（以px为单位而不是％）时，我已经可以可视化地图l-map样式=“ height：500px”，因为如果使用100％，则看不到地图。使用v-navigation-drawer绘制地图时，会以以下方式组装该问题：

您注意到，它与左面板重叠。对于地图，我正在使用Vue2Leaflet库。预先谢谢你。