Map is expanding infinity when style is set to "height" : "100%"

[Erodotos]

Hello everyone,

I have the following map definition. My problem is that the map is indefinitely expanding towards the bottom when loading the page, and the height is set to 100%. How can I prevent that and make the map take the full height of my current view without expanding it?

<Map
          initialViewState={{
            longitude: 33.53865,
            latitude: 34.81837,
            zoom: 14,
          }}
          style={{ height: "100%" }}
          mapStyle="https://api.maptiler.com/maps/satellite/style.json?key="
          interactiveLayerIds={[layerStyle.id]}
          onMouseEnter={onHover}
        >
          <Source id="my-data" type="geojson" data={geojson}>
            <Layer {...layerStyle} />
          </Source>
        </Map>

[Pessimistress]

100% refers to the height of the layout parent, but your parent element does not have a stable height. Mapbox/maplibre measures the size of the map container and convert it into absolute pixels. If your parent element auto expands with its content, then it will form a feedback loop of ever growing page height.

Whatever container you are rendering the map into, you need to set the height explicitly to either absolute pixels (e.g. 800px, or something relative to the viewport size (e.g. calc(100vh - 40px).