Div is not using 100% of height in React.js

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 two other div's (LeftContainer and RightContainer) side by side, but none of the div's occupies 100% of the page's height. I am attaching both the Layout class and the styling below.

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%;
`

The link for Github repo is: https://github.com/FranciscoJLucca/franciscolucca.github.io

Answer 1

If you're aiming for the element to be the height of the page, you'll want to use height: 100vh; instead. The vh stands for viewport height. The percentage will only take 100% of the height from its parent. Hope this helped.

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