How to redraw the map here when resizing the container?

Question

Today I ran into a particular problem that I had not encountered or noticed before. When setting up the map in Maps 3.0, here I noticed that if the browser window is "small" smaller than the full screen, the map will also remain small during map loading, even if the browser window is changed to full screen.

How can I update the size of the "Maps" card here to take up as much space as is allocated?

My arrangement is this, and I wonder if the reason for this could be relative divs. The reason is because I am experimenting with projects that have headers, footers, other text with and without scroll bars (and it looks like scrolling the map gets a little nervous if there is a scroll bar on the page).

<style type="text/css">
    #mapContainer {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        position: absolute;
        background: grey;
    }

    #main {
         position: relative;
         width: 100%;
         height: 100%;
    }

    html, body {
        overflow-y: hidden;
    }    
</style>

<div id="main">
    <div id="mapContainer"></div>
</div>

Answer 1

try this after initializing the map object:

window.addEventListener('resize', function () {
    map.getViewPort().resize(); 
});

This should solve the problem.

Answer 2

, , , . , , resize() - AfterRender - , .