JSFiddle - React, Tailwind, and code Playground

HTML

<html>

    <body>
        <div id="container">container
            <figure>
                <p>scale browser up to HERE... then scroll down... see the pink ?
                    every time i build a site... i wrestle with this... eveything i've read says to set html and body to height:100%;  and the wrapper/container to min-height: 100%;  but i'm never really satisfied with the outcome... do you know the magic key ?????</p>
            </figure>
        </div>
    </body>

</html>

CSS

* { -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box;
    position: relative;
    padding: 0;
    margin: 0;
    }

html {
    overflow-y: scroll;
    background: #ff0099;
    
    }
    
html, body {
    }
    
body {
    background: green;
    border:5px solid red;
    min-height: 100vh;
    }
    
#container {
    position: relative;
    width: 60%;
    background: purple;
    margin: 0 auto;
    }

figure {
    width: 100%;
    height: 300px;
    background: black;
    margin: 100px auto 0 auto;
   
    color: white;
    text-align: center;
    }