使react-leaflet映射组件调整自身大小以适应可用空间

.map-container {
  width: 100%;
  height: 100%;
}

import React from 'react';
import { MapContainer, TileLayer } from 'react-leaflet';

const MapComponent = () => {
  return (
    <div className="map-container">
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{ width: '100%', height: '100%' }}
      >
        <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
      </MapContainer>
    </div>
  );
};

export default MapComponent;

.parent-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100vh;
}

import React from 'react';
import MapComponent from './MapComponent';

const App = () => {
  return (
    <div className="parent-container">
      <header>Header</header>
      <main style={{ flex: 1 }}>
        <MapComponent />
      </main>
      <footer>Footer</footer>
    </div>
  );
};

export default App;