I have added map to my site and everything works fine when the map is placed in a parents div with display:flex.

But I have a requirement to display my map after the user clicks on a button so the parent div in which map is placed at the loading of page has display:none and then when clicking on button it becomes flex.

But when clickng on button something strange happens to map map not shown correctly

I found out that when resizing it becomes normal map shown correctly

here is the map css:

#add_adv_map {
    width: 90%;
    height: 400px;
    margin-top: 20px;
    margin-bottom: 5px;
}

and html

<div class="add-adv__info__item add-adv__info__item--block add-info-address">
     <div class="add-adv__form__title">adress</div>
     <input type="text" name="flat_location" class="object_parameter_input object_parameter_input--large"
                 id="add_adv_address"
      <div id='add_adv_map'></div>  required> <!--map container-->
</div>

havent found any questions on this topic and any answers either