带有 header div 的 GoogleMap 超出了 window 大小

Question

Note: I've seen some similar questions and tried their answers (CSS position: absolute), but they are all ~7 years old and did not solve my problem.

I am making a simple React app with an interactive Google Map with a header that displays information from the map. However, the map always expands a bit below the page, causing the page to scroll up/down by the same amount as the header size.

This is a demo , which does what is described above, along with relevant code snippets:

HTML (served via React component, as seen in demo)

<div>
  <div className="row-header">
  </div>

  <div className="mapContainer">
    <GoogleMap id="map" mapContainerStyle={mapContainerStyle} zoom={4} />
  </div>
</div>

CSS

.row-header {
  min-height: 305px;
  display: flex;
}

.col-left {
  width: 33%;
}

.col-right {
  width: 66%;
}

.mapContainer {
  max-width: 100%;
}

After some research, I found that I should try CSS absolute positioning , however this has not helped. This is a demo of that new version:

HTML

<div>
  <div className="row-header">
  </div>

  <div className="mapContainer">
    <GoogleMap id="map" mapContainerStyle={mapContainerStyle} zoom={4} />
  </div>
</div>

CSS

.row-header {
  min-height: 305px;
  display: flex;
  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  height: 305px;
}

.mapContainer {
  position: absolute;
  top: 305px;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.Container {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
}

Answer 1

As I was writing this question discovered the answer. Figured I might as well post and share.

The CSS Absolute Position fix DOES WORK, however in this particular case the fix is not done in the CSS, but in the Javascript. That is because @react-google-maps/api , uses mapContainerStyle={mapContainerStyle} , which seems to be a required field (although the docs don't make that clear).

After modying mapContainerStyle from

const mapContainerStyle = {
  height: "100vh",
  width: "100vw"
};

to

const mapContainerStyle = {
  position: "absolute",
  top: "305px",
  left: "0px",
  right: "0px",
  bottom: "0px"
};

The page displays as intended! See Demo