How to display leaflet map in framework7? – Blancer.com Tutorials and projects

I’m using Framework7 v. 5.5.1 and Leaflet 1.9.3 (https://leafletjs.com/),

I couldn’t show the map correctly.

I have to use the map in two different pages.
On the first page, I have to view it in full screen, however the map goes beyond the screen, I can’t see the right side and the bottom side.

There seems to be some css rules against f7’s css

Thank you in advance.

on: {
            pageInit: function(e,page){     
                                    
                    var map = L.map('map').setView([48.864716, 2.349014], 8);           }
                                        
},

#map { 

    overflow: hidden;
    position: fixed;
    height: 100%;
    width: 100%;
}

<div class="page-content">
    <div class="row">
        <div class=" col-100 medium-100 large-50">
           <div class="col">
                 <div id="map"></div>
             </div>
        </div>     
   </div>
</div>