when I define a percentage value for the height of the children with position absolute it works although there is no defined height to the parent

* {
    box-sizing: border-box;
}

here I just styled the button I have no any problem

button {
    background-color: rgb(21, 163, 92);
    color: white;
    text-align: center;
    padding: 20px;
    width: 150px;
    border-radius: 5px;
    border: none;
    font-size: 28px;
    display: block;
    margin: 150px auto;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

here is my question because if I removed position: absolute it will not accept percentage height but with position absolute percentage height value is accepted

button > div {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 300%;
    height: 350%;
    background-color: #f1f1f1;   
    opacity: 0;
    transition: 0.8s;
}

also here there is no problem I am just making the ripple button effect

button:active > div {
    width: 0;
    height: 0;
    opacity: 1;
    transition: 0s;
}

<html> 
    <body>
        button>click
            <div></div>
        </button>

    </body>
</html>