Making width 100% so it fills space in responsive screen size

[ejntaylor]

On smaller screens the container increases in size, but the map does not.

It seems the map canvas width and height is generated and injected into the dom element.

eg.
<canvas class="mapboxgl-canvas" tabindex="0" aria-label="Map" width="400" height="257" style="width: 400px; height: 257px;"></canvas>

I am unable to override the width with css.

Any ideas how I can make the map canvas expand to fill the parent container.

Thanks

[sdrios]

You can select the canvas element inside the map container and set it to width:100%;.

Here is an example with less
#map { width: 100%; height: 88vh; canvas { height: 100%; width: 100%; } }