<!DOCTYPE html>
<html>
    <body>
        <p>The height of innerdiv should be 50% of the height of the outerdiv.</p>
        <div id="outer" style="height: 50vh; width: 400px; background-color: lightcyan;">
            <div id="inner" style="width: 50%; height: 50%; background-color: lightseagreen;"></div>
        </div>    
    </body>
</html>