Why are tiles not loading and the map not filling its parent div?

Question

Tiles are not loading and the map not filling its parent div on all screensizes including mobile, however, when you resize the screen manually the map loads properly? All I get a small segment of the map appearing in the parent div

Tried changing the layout, sizing, and positioning. Also added the following code:

map.on('load', function() {
  document.querySelector('.map').style.width = "100%";
  document.querySelector('.map').style.height = "100%";
  map.resize();
});

and also tried:

map.on('load', function() {
  map.resize();
});

to my custom code.