I'm building a website using React (16.8.6), but on mobile Safari, when the user starts scrolling, it doesn't collapse/shrink the URL bar like other websites do.

The CSS for the wrapping div looks like this:

  {...otherComponentsHere}  

const ContentContainer = styled.div` height: 100%; /*Allow two columns to occupy the entire height of the browser window*/ overflow-y: auto; flex-grow: 1; display: flex; flex-direction: column; `; const ScrollContainer = styled.div` flex: 1; `;

App.css looks like this:

html { height: 100%; min-height: 100vh; } body { font-family: 'Work Sans', 'Courier New', sans-serif; min-height: 100%; height: 100%; margin: 0px; } #app { height: 100%; } #root { height: 100%; display: flex; overflow: hidden; /*Make the body non-scrollable*/ box-sizing: border-box; }

I'm trying to figure out an issue in this CSS that's preventing the Safari URL bar from collapsing as the user scrolls. Thank you for your help.