react-leaflet / there is problem with Mapcontainer

Question

the component render well but It doesn't display so I change some css property from Inspect. I put map container in part of my page in div - but map work differently from div. this is my code.

<div className={style.map_container}> //this my container I wrote it
     <MapContainer style={{height:'80px',width:'80'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={false}>
       <TileLayer   attribution='contributors'
       url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"/>
      <Marker position={[51.505, -0.09]}>
        <Popup>
            A pretty CSS3 popup. <br /> Easily customizable.
        </Popup>
     </Marker>
   </MapContainer>
</div>

also I put main css of leaflet on index.html

I don't what am I doing but I think there is problem with css.

Answer 1

the main property that you should assign is height - I should just set height in inline css proerty to my component,

react-leaflet you have to consider this rule

<MapContainer style={{width:'90%',height:'99%'}} center={[51.505, -0.09]} zoom={13} scrollWheelZoom={true}>

ta-daaa!!! map work very well