Safari mobile上的React应用程序超过100%

我遇到了一个问题,我的应用程序超出了屏幕上100%的窗口,底部也隐藏了一些额外的空间(看起来总的额外空间等于Safari上的顶部URL栏)。以下是我手机上应用程序的屏幕截图:

您可以看到顶部栏可以滚动出窗口,如何防止这种行为?注意:它在Chrome mobile上不这样做——它停留在窗口内

return(
    <div className = {classes.FullApp}>
        <TopBar toggle={this.toggleSideBar} isOpen={this.state.sidebar} logout={this.handleLogout}/>
        <main className={classes.Main}>
            {sidebar}
            {dash}
        </main>
    </div>
)

.FullApp{
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}
.Main{
    position: relative;
    height:90vh;
    width:100%;
    background-color: chocolate;
    display:flex;
    z-index:135;
}
.Side{
    width: 50vw;
}

顶栏CSS:

.TopBar{
    background-color:#49d49d;
    height:10vh;
    width:100%;
    display:flex;
    justify-content: space-between;
    align-items: center;
    z-index:175;
    box-shadow: 0px 0px 42px 0px rgba(0,0,0,1);
}