阻止 div 在导航栏上重叠

问：

我有一个 App 容器，它有两个组件，导航栏和内容 div。现在的问题是出于某种原因，当我调整窗口大小时，特别是高度，内容 div 会偷偷地与导航栏重叠。窗口的高度越小，它覆盖的导航栏就越多。

编辑：刚刚意识到，当我完全删除内容时，它仍然这样做???就像空虚的虚无仍然在导航栏上一样。那么，是导航栏的高度在降低吗？但如果是这样，文本仍然完美地放置，这是怎么回事。空白空间如何接管导航栏

主布局：.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