I am new to JavaScript. The leaflet on the page doesn't display the map until I change the .leaflet-container property { overflow: ;}, you can see it in image2. How can I fix this? Thank you! CSS

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"  />
<style>
    body {
        padding: 0;
        margin: 0;
    }
    html, body, #map {
        height: 100%;
        width: 100%;
    }

HTML

<div id="map"></div>

JS

</body>
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script>
    <script>
        var map = L.map.invalidateSize();
        L.tileLayer(
            'https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=ekfefkerdkdfk2', 
            {attribution: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'}
        ).addTo(map);
    </script>