Div is not occupying 100% of the page height

Question

I’m using React.js + next.js + Styled Components to develop the front of an app. In my Layout file I have a Wrapper that makes the other two div’s (Leftcontainer and Rightcontainer) stand next to each other, but neither div’s occupies 100% of the page height. I am attaching below both the Layout class and that of its styling.

export default function Layout({ children }) {
    return (
        <>
            <Wrapper>
            <LeftContainer>
                a
            </LeftContainer>
            <RightContainer>
                a
            </RightContainer>
            </Wrapper>
        </>
    )
}

import styled from 'styled-components'

export const Wrapper = styled.div `
    display:flex;
    flex-direction:row;
    height:100%;
    min-height:100%;
`

export const LeftContainer = styled.div `
    display:flex;
    flex-direction: column;
    width:100%;
    //background-color: ${(props) => props.theme.colors.secondary};
    background-color:black;
`

export const RightContainer = styled.div `
    display:flex;
    flex-direction: column;
    //background-color: ${(props) => props.theme.colors.primary};
    background-color:red;
    width:100%;
`