How to make DIV take the full height of Browser

I want to make a DIV with height 100% to take the full height of the Browser Window not just the Viewport height.

The outer DIV has Display property Flex.

The target DIV has class called full-height-div

That is HTML code

<div class="main-container">
    <div class="full-height-div">
        
    </div>
    <div class="main-content">
        
    </div>
</div>

and that is CSS code

body, html {
    margin: 0;
    height: 100%;
}

.main-container {
    display: flex;
    height: 100%;
}

.full-height-div {
    height: 100%;
}