Why does child's width and height relative to grandparent not work?

Question

I'm working on a react app and facing some issues with css.

This is my setup:

Router

class App extends Component {
    render() {
        return (
            <HashRouter>
                <Switch>
                    <Route element={<WithNavbar />}>
                        <Route path="/" element={<MainPage />} />
                    </Route>
                    <Route element={<WithoutNavbar />}></Route>
                </Switch>
            </HashRouter>
        );
    }
}

export default App;

With Navbar

export interface IWithNavbarProps {}

const WithNavbar: React.FunctionComponent<IWithNavbarProps> = (props) => {
    return (
        <>
            <Navbar />
            <div className="main">
                <Outlet />
            </div>
        </>
    );
};

export default WithNavbar;

Main Page

const MainPage: React.FunctionComponent<IMainPageProps> = (props) => {
    

    return (
        <div className="full-size">
             <div className="half-size ">
                   
             </div>
        </div>
    );
};

export default MainPage;

the CSS

.main {
    min-width: 100vh;
    min-height: 94vh;
    max-height: 94vh;
}

.full-size{
    width: 100%;
    height: 100%;
}
.half-size{
    width: 50%;
    height: 50%;
}

With the upper setup, for some reason, the div with half-size has a width/height of 0 (not visible at all).

if I apply following change to MainPage, half-size works kind of (div is visible 50% of screen height, is squared)

    return (
        <div style={{width: '100vh', height: '100vh' }} className="">
             <div className="half-size ">
                   
             </div>
        </div>
    );

However, if I apply this change in MainPage, half-size does not work again

    return (
        <div className="main">
             <div className="half-size ">
                   
             </div>
        </div>
    );

I don't understand this behaviour. Why does the reference to the grandparent not work? Why does inline style work? And why does the size setup of class main not work on MainPage level? (other properties such as background do work)