How to fix the height of the Yandex map?

Question

css

There is a Yandex map:
There is a map initialization code:

$(document).ready(function(){
  if ($('.invoices-map').length) {
    ymaps.ready(initInvoicesMap);
  }
  console.log(ymaps);
})

function initInvoicesMap() {

  var multiRoute,
    mapText,
    mapLink;

  // Инициализация карту
  myInvoiceMap = new ymaps.Map($('.invoices-map')[0], {
    center: [55.752411, 37.623140],
    zoom: 9
  });
  console.log(myInvoiceMap);

}

There is a problem: When loading a page, if the Internet is very slow, then when updating the page (namely, when updating, when you load the page without a cache, everything is fine), the height of the map becomes 0 pixels and no requests are made to the server to draw map blocks:

Also, with any change in height screen (from full screen to normal, or resizing the content or browser) the map falls into place:

Also, when the map log is displayed on the console:

Answer 1

Only min-height will save here

Answer 2

.invoices-mapmust have some height before the map loads. If you use 100% for absolute positioning, then the parent must have some height, otherwise it will be 0.
Try 100%using instead100vh