[Solved]-GoogleMap with header div extends beyond window size-Reactjs

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