How to fit the lightning-map component within specific dimensions?

Question

I have a lightning-map component that I need to fit within the div element. But it looks like the default width specified in the slds-map css is 23.75rem which is causing the map to flow outside. Can anyone help me with a way to adjust the inner styles using css/javascript?

I was able to adjust the width by inspecting the element and manipulating the slds-map class:

But, I need a way to implement this in the actual code:

<div class="mapBoundary">
   <lightning-map 
       map-markers={item.mapMarkers}
       zoom-level={zoomLevel}>        
   </lightning-map>
</div>

I tried the following CSS to try overriding the default css, but it didn't work:

lightning-map > div > div .slds-map{
    width: 100%;
    height: 100%;
    position: relative;
    min-width: 10rem;
}

Answer 1

Found a solution for this via Javascript:

renderedCallback() {
    const style = document.createElement('style');
    style.innerText = `c-wc-locations .slds-map {
    min-width: 0 !important;
    }`;
    this.template.querySelector('lightning-map').appendChild(style);
}

Answer 2

You need to load your .css styles inside a .zip as a static resource in salesforce. This worked for me:

JS file:

import { loadStyle } from 'lightning/platformResourceLoader';
import yourCss from '@salesforce/resourceUrl/yourStaticResource'
connectedCallback() {
            // Init CSS Static Resource
            loadStyle(this, yourCss + '/yourCssFile.css');
}

CSS file:

.slds-map{
  position: relative;
  min-width: 5.0rem;
  width: 100%;
  max-height: 100%;
}