Trying to embed a leafletJS map in a responsive website – Blancer.com Tutorials and projects

I am trying to generate a responsive website where a map and an info div would be displayed laterally on large screens and stack on phones.

My main code is:

<body>
    <div id="global_container">
        <div id="maCarte">
            <script>
... scripts to generate maps ...
            </script>
        </div>
            
        <div id="left_panel">
            <div id="info_block">
                <p id="detailed_info">
                </p>
            </div>
        </div>
    </div>
</body>

And the CSS contains:

body{
    font-family: "Ubuntu", "Open Sans", sans-serif; /* Optima, Calibri, "Gill Sans", Verdana, "Trebuchet MS", Geneva, */
    margin:0;
    background: #F1F3F9;
}

#global_container {
    display: flex;
    flex-wrap: wrap; /* Allows wrapping for smaller screens */
}

#maCarte{
    position: relative; /* pb avec INSEE */
    width: 65%;
    float: left;
    height: 100vh; 
}

#left_panel {
    color: #333;
    width: 35%;
    float: right;
}
    
#info_block {
  width: auto;
  height: auto;
  margin: 0 auto;
  padding: 0 10%;
  position: relative;
}


/* Keep after the definition of #maCarte and #left_panel */
@media all and (max-width:800px) {
    #maCarte, #left_panel {
        display: block; 
        float: none; 
        width: 100%;
    }
}

However, instead of stacking normally, the two blocks superimpose on small screens. I assume this is due to using height: 100vh; for #maCarte, but if I do not use it, then the maps is of zero height or does not fill in the page in computer screens.

What should I do?