Stop div from overlapping over nav bar

I have an App container, which has two components, the nav bar and the content div. Problem now is for some reason, when I resize the window, specifically the height, the content div sneaks up overlapping the nav bar. The smaller the hieght of the window gets, the more it covers of the nav bar.

EDIT: Just realized that when i remove the content entirely, it still does it??? Like the empty nothingness still goes over the nav bar. So is it the nav bar thats decreasing in height? But if it is, the text is still perfectly placed, how is that so. How's the empty space taking over the nav bar

Main Layout.js

// Defining styles
const AppContainer = styled.div`
    box-sizing: border-box;
`;

// Defining styles
const Content = styled.div `
    display:flex;
    min-height: 94vh;
    width: 100vw;
`;


const Container = styled.div `
    background-color: #FAFFEB;
    padding: 15px;
    flex-grow: 12;
    
    `;
    
// -------------
// Nav Bar styles
// ------------
[enter image description here][1]
const NavBar = styled.nav `
    background-color: #f06e6c;
    width: 100vw;
    height:6vh;
`;

const NavList = styled.ul `
    padding: 0px 0px;
    list-style: none;
    height:6vh;
    margin: 0px;
    display: flex;
    align-items: center;
    flex-direction: row;
    
`;

const NavItem = styled.li `
    padding: 30px 10px 0px 10px;
    height:6vh;
    font-family: 'Poppins', sans-serif;
    font-size: 12pt;
    font-weight: 600;
    color: #FAFFEB;
    text-align: center;

    
    &:hover {
        background: #ff8987;
        cursor: pointer;
    }
    
`;

const Logo = styled.li `
    padding: 10px 10px 0px 10px;
    height:6vh;
    font-family: 'Roboto Slab', serif;
    font-size: 24pt;
    font-weight: 600;
    color: #FAFFEB;
    text-align: center;
    
    &:hover {
        cursor: pointer;
    }
`;



function MainLayout({children}) {
    return (
        <AppContainer>
            
            <NavBar>
                <NavList>
                    <Logo>Tasks</Logo>
                    <NavItem>Login</NavItem>
                </NavList>
            </NavBar>
    
            <Content> 
                <SideBar /> 
                <Container>
                    {children}

                </Container>
            </Content>
        </AppContainer>
    )
}

export default MainLayout