Horizontal Scrolling with Media Queries

Question

I have a horizontal scroll with a map and other text, but when using the website on phone (finished media queries) this page, and all the other pages seem to add extra height, or not show the full height of the page due to the search bar still showing. For this specific horizontal scrolling page, I have the height set to unset, but I cannot change it otherwise the horizontal scroll will not work. Is there any solution to making sure that the search bar of the browser doesn't add any extra height to the page?

html {
  overflow-x: scroll;
  height: 100%;
}

body {
  overflow-y: hide;
  position: absolute;
  height: unset;
  background: black;
}

html, body {
  overflow-x: hidden;
  margin: 0;
}

This is what I have in the horizontal scroll page...