Mapbox doesn't display full until I put full screen or open developer tools

I am using a mapbox api to generate a map. I’m trying to make width and height equal to 100%, but the class mapboxgl-canvas has a default value when start it’s 300px for witdth and 400px for height.

But when I give full screen or developer tools it is placed with the css styles that I defined which are these

#map {

    width: 100%;

    height: 100%;


This is my




      Tab 2





  <div id="map"></div>


And my TypeScript file

import { Component, OnInit } from '@angular/core';

import { environment } from '../../environments/';

import * as Mapboxgl from 'mapbox-gl';


  selector: 'app-tab2',

  templateUrl: '',

  styleUrls: ['']


export class Tab2Page implements OnInit{

  constructor() {}

  title = 'view';

  map: Mapboxgl.Map;


    (Mapboxgl as any).accessToken = environment.mapboxKey; = new Mapboxgl.Map({

    container: 'map', // container id

    style: 'mapbox://styles/mapbox/outdoors-v11',

    center: [-74.810913,10.985246], // LNG, LAT

    zoom: 14 // starting zoom



    // Add zoom and rotation controls to the map. Mapboxgl.NavigationControl());



in scss write this:

#map {
    height: 100%;
    width: 100%;

#map-container {
    height: 100vh;
    width: auto;

in HTML:

<div id="map-container">

  <div id="map"></div>